6 Client side GraphQL with React & 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, include 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 Enabling Generated Mutations

6.2.2 Create Nodes

6.2.3 Create Relationships

6.2.4 Updating And Deleting

6.3 Client State Management With GraphQL

6.3.1 Local-Only Fields & Reactive Variables

6.4 Exercises

6.5 Summary

sitemap