Chapter 6: React

Chapter contents:

• Setting up
  • Build options
  • App structure
  • Set up Apollo
• Querying
  • First query
  • Loading
  • Polling
  • Subscriptions
  • Lists
  • Query variables
  • Skipping queries
• Authentication
  • Logging in
  • Resetting
• Mutating
  • First mutation
  • Listing reviews
  • Optimistic updates
  • Arbitrary updates
  • Creating reviews
  • Using fragments
  • Deleting
  • Error handling
  • Editing reviews
• Advanced querying
  • Paginating
    • Offset-based
      • page
      • skip & limit
    • Cursors
      • after
      • orderBy
  • Client-side ordering & filtering
  • Local state
    • Reactive variables
    • In cache
  • REST
  • Review subscriptions
    • Subscription component
    • Add new reviews
    • Update on edit and delete
  • Prefetching
    • On mouseover
    • Cache redirects
  • Batching
  • Persisting
  • Multiple endpoints
• Extended topics
  • Linting
  • Uploading files
  • Testing
  • Server-side rendering

Background: single-page application, HTTP, Node, git, JSON, JavaScript, React

In this chapter, we’ll learn to use the @apollo/client library through building the Guide web app—the code behind the https://graphql.guide site, where we can sign in, read the book, and write reviews. We’ll go through setup, simple queries, complex queries, auth, and mutations for creating, updating, and deleting. Then we’ll cover advanced topics like infinite scrolling, local state, SSR, working offline, and performance. Here’s what it will look like:

We’ll be using Apollo’s hooks API. For an older version of this chapter that uses Apollo’s render prop and higher-order component APIs or the Apollo Client 2.* cache API, see version r5 of the Guide:

• r5.pdf
• r5.mobi
• r5.epub

We recommend Apollo for its flexibility, ease of use, documentation, and ecosystem. The main alternative is Relay, which is more opinionated—it requires fragments colocated with components, specific ways of working with errors, and a certain format for the server schema, including Nodes, universally unique ids, connections for pagination, and mutation structure. It also requires use of the Relay compiler. For more info on these differences, check out this Twitter thread and this post.