Get started with Apollo Client

05.03.2023 — graphql, apollo — 2 min read

Applications that use Apollo Client require two top-level dependencies:

@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.

Resources

Install the client and test run

npm install @apollo/client graphql

import { useState } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client'
import Add from './components/Add';
import List from './components/List';
import { items as groceryList } from './data';
import { GroceryItem } from './types';

function App() {
  const [items, setItems] = useState<GroceryItem[]>(groceryList);
  const addToItems = (item: GroceryItem) => {
    setItems([...items, item])
  }

  const client = new ApolloClient({
    uri: 'http://localhost:4000',
    cache: new InMemoryCache()
  })

  client
    .query({
      query: gql`
        query GetItems {
          groceryItems {
            name
            done
          }
        }
      `
    })
    .then(result => console.log(result));

  const toggle = (name: string) => {
    const newItems = items.map(item => {
      if (item.name === name) {
        return {
          ...item,
          done: !item.done
        }
      }
      return item;
    })
    setItems(newItems);
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold mb-4">Grocery List</h1>
      <div className="App">
        <div><List items={items} toggle={toggle} /></div>
        <div className="pt-10">
          <Add addToItems={addToItems} />
        </div>
      </div>
    </div>
  )
}

export default App;

Connect the client to React

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client'
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache()
})
)

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <ApolloProvider client={client}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Refetch queries

To refetch a specific query by name, use the include option.

import { useApolloClient } from '@apollo/client'

const JobItems = ({ items }: { items: Job[] }) => {
  ...
  const client = useApolloClient()

  return (
     ...
     <KeyboardAwareScrollView
        contentContainerStyle={{ flexGrow: 1 }}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => {
              void client.refetchQueries({ include: ['MyJobs'] }).then().catch()
            }
          }
          />
        }
      > 
      ...
  )

Testing React components

Every test for a React component that uses Apollo Client must make Apollo Client available on React's context. In application code, you achieve this by wrapping your component tree with the ApolloProvider component. In your tests, you use the MockedProvider component instead.

Get started with Apollo Client

Resources

Install the client and test run

Connect the client to React

Refetch queries

Testing React components

Test mutation