Lessons

lesson

In this lesson, we'll configure the useQuery and useMutation Hooks we've created to use another state management Hook to handle state. We'll use React's useReducer Hook.

Hassan Djirdeh

Jing Chen

lesson

In this lesson, we'll create a custom useMutation Hook which will abstract the server fetch functionality needed to conduct a mutation from a component.

Hassan Djirdeh

Jing Chen

lesson

In this lesson, we'll address how we can handle the loading and error state of our GraphQL queries with our custom useQuery Hook.

Hassan Djirdeh

Jing Chen

lesson

In this lesson, we'll introduce the capability for a component to manually refetch a query from the useQuery Hook.

Hassan Djirdeh

Jing Chen

lesson

With React's useState and useEffect Hooks, we've been able to query and display listings information the moment our Listings component is mounted. In this lesson, we'll create our very own custom useQuery Hook that will consolidate the pattern of creating a state property, using the useEffect Hook, and running the server fetch() function to make a query and state update when a component mounts.

Hassan Djirdeh

Jing Chen

lesson

We've managed to use the useState Hook to track and display listings data to our UI. In this lesson, we'll introduce the useEffect Hook and see how we can create an effect callback to query listings data the moment our component mounts.

Hassan Djirdeh

Jing Chen

lesson

Though we've been able to create a custom fetch() function to help us make the GraphQL requests to query listings or delete a certain listing, we've only seen the results of our requests in our browser console. In this lesson, we'll introduce and use React's useState Hook to track listings state value in our function component with which we'll be able to use and display in our UI.

Hassan Djirdeh

Jing Chen

lesson

In this lesson, we discuss the motivation behind React Hooks and see a few examples of how React Hooks can help share logic between our React components.

Hassan Djirdeh

Jing Chen

lesson

This lesson is a summary of the work done in Module 6.0.

Hassan Djirdeh

Jing Chen

lesson

In this lesson, we'll use our custom server fetch() function to invoke the deleteListing mutation we have in our GraphQL API, to delete a listing in our listings collection.

Hassan Djirdeh

Jing Chen

lesson

Although the custom server fetch() function we've established in the last lesson works, the data being returned isn't appropriately typed. In this lesson, we'll take advantage of TypeScript generics to ensure we get queried data from our server fetch() function with the appropriate type.

Hassan Djirdeh

Jing Chen

lesson

Numerous tools and libraries exist to help clients make GraphQL requests to a GraphQL API. Before we begin to introduce a third-party library to help make our GraphQL requests, we'll look to make our requests with the help of the window Fetch API. In this lesson, we'll begin to make the connection between our React client and Node server and see if we can query the listings query from our GraphQL API.

Hassan Djirdeh

Jing Chen