Scott Moss
Initialized
Course Description
Learn to use GraphQL on the client-side using React with Apollo Client. In this course, you'll use queries and mutations to fetch and update GraphQL API data. You'll go further with variables, inputs, aliases on fields. Then attach your queries and mutations to React and interact with an Apollo Server using React hooks to build amazing things with React and GraphQL!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
Scott Moss defines GraphQL as a declarative query language that clients can use to ask an API for the data needed, and explains how this course will focus on using GraphQL with React on the front end.
Scott explains that using GraphQL on the front end means issuing requests to execute queries and mutations, shares the GraphQL spec, and demonstrates how to use the GraphQL playground.
GraphQL Basics
Section Duration: 29 minutes
Scott defines operation names as unique names for the GraphQL client side query and mutation operations. Operation names are used by tools like the GraphQL playground to reference different operations.
Scott demonstrates how to write a query operation in GraphQL by declaring a variable, and setting a variable's type and value.
Scott explains that multiple queries can run within the same API call, demonstrates how to write a mutation operation, and answers questions about caching in mutations, and what is sent to the API when querying.
Scott defines Apollo Client as an encapsulation of http logic and a client side state management tool, and answers questions about how to use Apollo Client for state management.
Scott explains that every node or object that gets returned from the API is stored in a local cache by ID and typename. It is considered best practice to save nodes using the default ID.
Apollo React
Section Duration: 57 minutes
Scott demonstrates how to write an Apollo client, links it to an API, exports it as the default client, and writes a new query.
Scott explains that Apollo creates hooks to facilitate interactions with GraphQL on the client side. Whenever a hook is used, in this case useState, it will have an array of two elements, the first one is the initial state property, the second is a function updating or changing the initial state. When using the hook, the default state is passed.
Scott demonstrates that the useQuery hook needs a query to function properly, and codes a new query for that specific hook. Students are instructed to write a query for the client to fetch data.
Scott live codes the solution to the querying data exercise.
Scott demonstrates how to query a mutation, and explains that contrary to other forms of querying, mutations will contain arguments to let the server know what to mutate.
Students are instructed to query the mutation that Scott live coded using the useMutation hook.
Scott live codes the solution to the querying mutations exercise.
Caching
Section Duration: 22 minutes
Scott explains how to keep the cache in sync by refetching matching queries after a mutation, using the update method on a mutation and watching queries. Questions from the audience are answered about latency, caching vs. requerying the database, and querying the client vs. querying using a hook.
Scott explains how to reference a cache in the update method, how to read queries after the cash, and save the changes. Clarifications are made about querying and caching in GraphQL.
Students are instructed to use a mutation to update the cache.
Scott live codes the solution to the cache update exercise.
Optimistic UI
Section Duration: 21 minutes
Scott demonstrates that optimistic UI avoids delays, by allowing a local update before any server update occurs. Optimistic UI updates itself, anticipates the response from the API, and proceeds as if the API call was synchronous.
Scott instructs the students to create an optimistic response so that the UI updates immediately.
Scott live codes the solution to the Optimistic UI exercise, and answers questions about error handling and optimistic response in a mutation vs. a query.
Directives & Fragments
Section Duration: 20 minutes
Scott demonstrates how to manage local state with Apollo, and GraphQL using client side schemas and adding a directive.
Scott explains that instead of duplicating fields within different queries, one can use fragments, and demonstrates how to write and add fragments.
Students are instructed to write fragments for every types, and make sure to add them to the mutations too.
Scott live codes the solution to the fragments exercise.
Scott describes the different directives that exist on the client side, namely `skip` and `include`. Experimental directives that need third party to function such as defer and live are mentioned.
Wrapping Up
Section Duration: 9 minutes
Scott wraps up the course, recommends additional tools including GraphQL voyager, onegraph, Apollo, and fly.io. Awesome GraphQL, specifically the graphql-code-generator, is also highlighted as a good GraphQL open source.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops