Using Apollo with React: Best Practices and Examples

React has been one of the most popular front-end libraries in recent years. With the introduction of GraphQL, it has become easier to fetch data and make API requests. Apollo is one of the most popular GraphQL clients for React, which makes it easy to connect your React application to your GraphQL server.

In this article, we will look at some best practices for using Apollo with React, and provide examples for each. We will use functional components for the code examples.

Getting Started

Before we dive into the best practices, let's first set up our environment. We will assume that you already have a basic understanding of React and GraphQL. Here are the steps to get started:

1. Create a new React project using create-react-app:

npx create-react-app my-apollo-app
cd my-apollo-app

2. Install the required packages:

npm install @apollo/client graphql

3. Create a new file called src/apollo.js and add the following code:

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

const client = new ApolloClient({
  uri: 'YOUR_GRAPHQL_SERVER_URI',
  cache: new InMemoryCache(),
});

export default client;

Replace YOUR_GRAPHQL_SERVER_URI with the URI of your GraphQL server.

4. Wrap your application with the ApolloProvider component in src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import client from './apollo';
import App from './App';

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

With these steps, you have set up Apollo in your React application. Now, let's dive into the best practices.

Best Practices

1. Use the useQuery Hook

The useQuery hook is the primary way to fetch data with Apollo. It is a React hook that takes a GraphQL query and returns the result of the query. Here is an example:

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

const GET_USERS = gql`
  query getUsers {
    users {
      id
      name
      email
    }
  }
`;

function Users() {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

In this example, we use the useQuery hook to fetch a list of users from the GraphQL server. We define the query using the gql tag and pass it to the useQuery hook. The hook returns an object with three properties: loading, error, and data. We use these properties to handle the loading and error states and render the data.

2. Use the useMutation Hook

The useMutation hook is used to send mutations to the GraphQL server. It is similar to the useQuery hook but is used for updating data instead of fetching data. Here is an example:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

const ADD_USER = gql`
  mutation addUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

function AddUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const [addUser, { loading, error }] = useMutation(ADD_USER, {
    onCompleted: () => {
      setName('');
      setEmail('');
    },
  });

  const handleSubmit = e => {
    e.preventDefault();
    addUser({ variables: { name, email } });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Add User</button>
    </form>
  );
}

In this example, we use the useMutation hook to add a new user to the GraphQL server. We define the mutation using the gql tag and pass it to the useMutation hook. The hook returns an array with two elements: the first element is the mutation function, and the second element is an object with properties loading and error.

We use the useState hook to define the name and email state variables, and we define a handleSubmit function that calls the addUser mutation function with the variables as arguments. We also define an onCompleted callback that resets the name and email state variables when the mutation is completed.

3. Use the useLazyQuery Hook

The useLazyQuery hook is used to fetch data on-demand, instead of automatically fetching data when the component mounts. It is useful when you want to fetch data based on user input, such as search queries or filters. Here is an example:

import React, { useState } from 'react';
import { useLazyQuery, gql } from '@apollo/client';

const SEARCH_USERS = gql`
  query searchUsers($query: String!) {
    searchUsers(query: $query) {
      id
      name
      email
    }
  }
`;

function SearchUsers() {
  const [query, setQuery] = useState('');
  const [searchUsers, { loading, error, data }] = useLazyQuery(SEARCH_USERS);

  const handleSubmit = e => {
    e.preventDefault();
    searchUsers({ variables: { query } });
  };

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

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Search Users"
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      <ul>
        {data && data.searchUsers.map(user => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

In this example, we use the useLazyQuery hook to search for users based on the search query entered by the user. We define the query using the gql tag and pass it to the useLazyQuery hook. The hook returns an array with two elements: the first element is the query function, and the second element is an object with properties loading, error, and data.

We use the useState hook to define the query state variable, and we define a handleSubmit function that calls the searchUsers query function with the query variable as an argument. We also render a list of users returned by the query, if the data is available.

Best Practices

1. Define your queries and mutations using the gql tag: This allows Apollo to parse your queries and mutations and generate the necessary network requests.
2. Use the useQuery hook for fetching data: This hook is designed to fetch data from the server and provides useful features like caching, error handling, and polling.
3. Use the useMutation hook for updating data: This hook is designed to send mutations to the server and provides useful features like optimistic updates, error handling, and onCompleted callbacks.
4. Use the useLazyQuery hook for fetching data on-demand: This hook is useful when you want to fetch data based on user input, such as search queries or filters.
5. Use Apollo Client Devtools for debugging: The Apollo Client Devtools is a browser extension that provides helpful features for debugging Apollo Client applications, such as inspecting queries and mutations, and tracking cache updates.
6. Use Apollo Link for custom network functionality: Apollo Link is a modular library for building custom network functionality, such as logging, authentication, and pagination.
7. Use Apollo Cache for local state management: Apollo Cache is a powerful local state management tool that allows you to store and retrieve data from the client-side cache. This is useful for storing data that is not available from the server, such as client-side form data or UI state.

Conclusion

Apollo Client is a powerful GraphQL client that provides useful features for fetching and updating data from a GraphQL server. By using the useQuery, useMutation, and useLazyQuery hooks, you can easily interact with the server and provide a great user experience. By following the best practices outlined in this article, you can build scalable and maintainable Apollo Client applications.