6 Client-side GraphQL with React and Apollo Client


This chapter covers

  • Connecting a React application to a GraphQL endpoint, using Apollo Client
  • Caching and updating data on the client, using Apollo Client
  • Updating data in the application, using GraphQL mutations
  • Using Apollo Client to manage React client state data

In the previous chapter, we created a React application, using Create React App, that allowed users to search for businesses by category. We used a single JavaScript object hardcoded into the application as the source of our data, so our application had limited functionality. In this chapter, we explore connecting our React application to the GraphQL API we created in previous chapters and introduce a new tool to our GraphQL toolbox: Apollo Client.

Apollo Client is a data management JavaScript library that enables developers to manage both local and remote data with GraphQL. It is used to fetch, cache, and modify application data and offers a number of frontend framework integrations, including React, to enable updating your UI as data changes.

6.1 Apollo Client

6.1.1 Adding Apollo Client to our React Application

6.1.2 Apollo Client hooks

6.1.3 GraphQL variables

6.1.4 GraphQL fragments

6.1.5 Caching with Apollo Client

6.2 GraphQL mutations

6.2.1 Creating nodes

6.2.2 Creating relationships

6.2.3 Updating and deleting

6.3 Client state management with GraphQL

6.3.1 Local-only fields and reactive variables

6.4 Exercises