Table of Contents
Introduction
Introduction
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. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdf https://github.com/FrontendMasters/fullstack-graphqlGraphQL Playground
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
Operation Names
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. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdfQuery Operation
Scott demonstrates how to write a query operation in GraphQL by declaring a variable, and setting a variable's type and value.Multiple Queries & Mutations
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.Apollo Client Tool
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.Storing API Data
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
Apollo Client & API Querying
Scott demonstrates how to write an Apollo client, links it to an API, exports it as the default client, and writes a new query. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdfApollo Client & Hooks
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.Querying Data Exercise
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.Querying Data Solution
Scott live codes the solution to the querying data exercise.Querying Mutations Demo
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.Querying Mutations Exercise
Students are instructed to query the mutation that Scott live coded using the useMutation hook.Querying Mutations Solution
Scott live codes the solution to the querying mutations exercise.
Caching
Caching & Synchronicity
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. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdfUpdating the Cache
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.Cache Update Exercise
Students are instructed to use a mutation to update the cache.Cache Update Solution
Scott live codes the solution to the cache update exercise.
Optimistic UI
Optimistic UI Updates
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. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdfOptimistic UI Exercise
Scott instructs the students to create an optimistic response so that the UI updates immediately.Optimistic UI Solution
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
Client Side Schemas
Scott demonstrates how to manage local state with Apollo, and GraphQL using client side schemas and adding a directive. - https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdfFragments
Scott explains that instead of duplicating fields within different queries, one can use fragments, and demonstrates how to write and add fragments.Fragments Exercise
Students are instructed to write fragments for every types, and make sure to add them to the mutations too.Fragments Solution
Scott live codes the solution to the fragments exercise.Apollo Directives
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.