Module 6 Summary

[00:00 - 00:26] In this module, we've created our first functional component, the listings component, and we've investigated how TypeScript allows us to type check the props a component is expected to receive. With the help of the browser window fetch method, we were able to create a server fetch function that makes a POST request to allow us to conduct our GraphQL queries and mutations.

[00:27 - 00:52] We've stated the content of our POST request as application JSON and the request pass in body of type JSON, where the query, or that is to say GraphQL documents, are required and the variables are optional. In our listings component, we've introduced two buttons, one responsible in querying the listings from our collection and the other responsible in deleting a certain listing.

[00:53 - 01:10] We've set up our GraphQL query documents as simple strings that is passed to each server fetch request we make in our component functions. For the delete listing request, we've hard coded an ID to delete a listing of that particular ID.

[01:11 - 01:36] In each of our server fetch requests, we've established generics to help define the type of data that is to be returned from our requests, as well as type check the variables that could be passed into our request. Though we've been able to create a custom fetch function to help us query listings or delete a certain listing, we've only been able to see the results of our requests in our browser console.

[01:37 - 01:56] In the next module, we'll investigate how we can keep track of state in our listings component, as well as modify how we make our query a mutation. We'll be interested in making our query the moment the component mounts, and for the mutation, we'll pass in an ID from a listing that is to be selected from the UI.

[01:57 - 02:00] We'll be achieving all of this by introducing and using React hooks.