Client-Side GraphQL in React
Table of Contents
IntroductionScott 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.
GraphQL PlaygroundScott 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.
Operation NamesScott 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.
Query OperationScott demonstrates how to write a query operation in GraphQL by declaring a variable, and setting a variable's type and value.
Multiple Queries & MutationsScott 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.
Apollo Client ToolScott 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.
Storing API DataScott 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 Client & API QueryingScott demonstrates how to write an Apollo client, links it to an API, exports it as the default client, and writes a new query.
Apollo Client & HooksScott 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.
Querying Data ExerciseScott 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.
Querying Data SolutionScott live codes the solution to the querying data exercise.
Querying Mutations DemoScott 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.
Querying Mutations ExerciseStudents are instructed to query the mutation that Scott live coded using the useMutation hook.
Querying Mutations SolutionScott live codes the solution to the querying mutations exercise.
Caching & SynchronicityScott 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.
Updating the CacheScott 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.
Cache Update ExerciseStudents are instructed to use a mutation to update the cache.
Cache Update SolutionScott live codes the solution to the cache update exercise.
Optimistic UI UpdatesScott 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.
Optimistic UI ExerciseScott instructs the students to create an optimistic response so that the UI updates immediately.
Optimistic UI SolutionScott 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
Client Side SchemasScott demonstrates how to manage local state with Apollo, and GraphQL using client side schemas and adding a directive.
FragmentsScott explains that instead of duplicating fields within different queries, one can use fragments, and demonstrates how to write and add fragments.
Fragments ExerciseStudents are instructed to write fragments for every types, and make sure to add them to the mutations too.
Fragments SolutionScott live codes the solution to the fragments exercise.
Apollo DirectivesScott 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.