Introduction

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

Get Started

Installation

npm install @apollo/client graphql --save

• @apollo/client: This single package contains virtually everything you need to set up Apollo Client. It includes the in-memory cache, local state management, error handling, and a React-based view layer.
• graphql: This package provides logic for parsing GraphQL queries.

Create a client

• Now that we have all the dependencies we need, let's initialize an ApolloClient instance.
• You'll need to provide it the URL of a running GraphQL server.
• In index.js, let's import ApolloClient from @apollo/client and provide our GraphQL server's URL as the uri property of the constructor's configuration object:

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io', // Backend API address
  cache: new InMemoryCache()
});

• That's it! Our client is ready to start fetching data.

Connect your client to React

• Connect Apollo Client to React with the ApolloProvider component.

• The ApolloProvider is similar to React's Context.Provider.

• It wraps your React app and places the client on the context, which enables you to access it from anywhere in your component tree.

• In index.js, let's wrap our React app with an ApolloProvider.

• We suggest putting the ApolloProvider somewhere high in your app, above any component that might need to access GraphQL data.

• For example, it could be outside of your root route component if you're using React Router.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import Routes from "./Routes";

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io', // Backend API address
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <Routes />
  </ApolloProvider>,
  document.getElementById("root")
);

Request data

• Once your ApolloProvider is hooked up, you're ready to start requesting data with useQuery.
• useQuery is a React hook that use the Hooks API to share GraphQL data with your UI.
• First, pass your GraphQL query (wrapped in the gql function) to the useQuery hook.
• When your component renders and the useQuery hook runs, a result object is returned that contains loading, error, and data properties:
• Apollo Client tracks error and loading state for you, which are reflected in the loading and error properties.
• When the result of your query comes back, it's attached to the data property.

Queries

Mutation

Update data with the useMutation hook

• Now that we've learned how to fetch data from our backend with Apollo Client, the natural next step is to learn how to update that data with mutations.
• This article demonstrates how to send updates to your GraphQL server with the useMutation hook.
• You'll also learn how to update the Apollo Client cache after executing a mutation, and how to track loading and error states for a mutation.

Executing a mutation

• The useMutation React hook is the primary API for executing mutations in an Apollo application.
• To run a mutation, you first call useMutation within a React component and pass it a GraphQL string that represents the mutation.
• When your component renders, useMutation returns a tuple that includes:
• 1) A mutate function that you can call at any time to execute the mutation
• 2) An object with fields that represent the current status of the mutation's execution