How to Set Up Apollo Client with React: Simple Guide

To set up Apollo Client with React, install @apollo/client and graphql, create an ApolloClient instance with your GraphQL endpoint, then wrap your app in ApolloProvider. Use hooks like useQuery inside components to fetch data.

Syntax

First, import the necessary Apollo Client modules. Then create an ApolloClient by specifying the GraphQL server URL in uri. Wrap your React app with ApolloProvider passing the client. Inside components, use useQuery to run GraphQL queries.

• ApolloClient: Connects to your GraphQL server.
• ApolloProvider: Makes the client available to React components.
• useQuery: React hook to fetch data.

javascript

import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      {/* Your components here */}
    </ApolloProvider>
  );
}

const QUERY = gql`query { exampleField }`;

function Example() {
  const { loading, error, data } = useQuery(QUERY);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return <div>{data.exampleField}</div>;
}

Example

This example shows a simple React app using Apollo Client to fetch a list of launches from SpaceX GraphQL API. It demonstrates creating the client, wrapping the app, and using useQuery to display data.

javascript

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.spacex.land/graphql/',
  cache: new InMemoryCache()
});

const GET_LAUNCHES = gql`
  query GetLaunches {
    launchesPast(limit: 3) {
      mission_name
      launch_date_local
      id
    }
  }
`;

function Launches() {
  const { loading, error, data } = useQuery(GET_LAUNCHES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.launchesPast.map(({ id, mission_name, launch_date_local }) => (
        <li key={id}>
          <strong>{mission_name}</strong> - {new Date(launch_date_local).toLocaleDateString()}
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <h1>SpaceX Launches</h1>
      <Launches />
    </ApolloProvider>
  );
}

Output

<h1>SpaceX Launches</h1><ul><li><strong>Mission 1</strong> - 9/15/2023</li><li><strong>Mission 2</strong> - 8/20/2023</li><li><strong>Mission 3</strong> - 7/10/2023</li></ul>

Common Pitfalls

Common mistakes include:

• Not wrapping your app in ApolloProvider, so hooks can't access the client.
• Forgetting to install graphql package, causing errors on gql usage.
• Using an incorrect or unreachable GraphQL endpoint URL.
• Not handling loading and error states in components.

Always check network requests and console errors for clues.

javascript

/* Wrong: Missing ApolloProvider */
function App() {
  return <Launches />; // useQuery will fail here
}

/* Right: Wrap with ApolloProvider */
function App() {
  return (
    <ApolloProvider client={client}>
      <Launches />
    </ApolloProvider>
  );
}

Quick Reference

Remember these steps:

• Install packages: npm install @apollo/client graphql
• Create ApolloClient with uri and cache
• Wrap your app in ApolloProvider
• Use useQuery to fetch data inside components
• Handle loading and error states

Key Takeaways

Wrap your React app in ApolloProvider with a configured ApolloClient instance.

Use the useQuery hook to fetch GraphQL data inside React components.

Always handle loading and error states to improve user experience.

Ensure you install both @apollo/client and graphql packages before starting.

Verify your GraphQL endpoint URL is correct and accessible.