Module 8 Summary
This lesson is a summary of the work done in Module 8.0.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL with a single-time purchase.
[00:00 - 00:20] In this module, we've introduced Apollo clients and used the use query and use mutation hooks available to us from the React Apollo library. In the source index file, we create a new Apollo client with the Apollo client constructor given to us from the Apollo Boost package.
[00:21 - 00:40] Apollo Boost is Apollo's recommended approach to setting up an Apollo client with a predefined configuration and setup. The only option we specify in the Apollo client constructor is the URI option where we define the URL endpoint of our GraphQL API.
[00:41 - 01:03] We get installed the Apollo provider wrapper component from React Apollo and wrap our listings components with Apollo provider. By doing so, we've been able to pass the Apollo client as the client prop of Apollo provider, which then provides the Apollo client in our listings component as part of context.
[01:04 - 01:35] In the listings component, we've imported the use query and use mutation hooks from React Apollo and the functionality of how we use these hooks are very similar to how we've done it for our custom hooks. Finally, the other significant change we've made is instead of creating custom types to describe the shape of data and variables in our GraphQL requests, we use the Apollo CLI tooling to auto-generate these types from our GraphQL schema.
[01:36 - 02:08] In the package JSON file, we have the code gen schema command, which creates a schema JSON file that describes the shape of our GraphQL schema and it places this file in the roots of our client project. With the schema available, we can then run the code gen generate command we've set up, which allows us to auto-generate the types of our GraphQL requests and it places these types in a generated folder within the folder the requests live.
[02:09 - 02:22] We reference these generated types in our listings components and use them for each of our GraphQL requests. This brings us to the end of how we're making our GraphQL requests.
[02:23 - 02:35] Despite all the work we've done, the UI of our app isn't really presentable. So to make our application look better, we'll be introducing and using a React UI framework in the next module.