Fetching Data in React with Apollo Client and GraphQL

Introduction

GraphQL is a powerful query language for APIs, and Apollo Client is a popular library for integrating GraphQL with React applications. Apollo Client simplifies data fetching, state management, and caching in React applications, making it a go-to solution for developers. This article will guide you through the process of fetching data in React using Apollo Client and GraphQL, from setting up Apollo Client to writing and executing GraphQL queries.

Step 1: Setting Up Apollo Client

Before you can start fetching data with Apollo Client, you need to set it up in your React application. Follow these steps to get started:

Install Apollo Client

First, install the necessary packages:

# Install Apollo Client and GraphQL
npm install @apollo/client graphql

This will install Apollo Client and GraphQL, which are required for integrating GraphQL with your React application.

Initialize Apollo Client

Next, initialize Apollo Client in your application. Create a new file named apolloClient.js in your project's src directory:

/* File: src/apolloClient.js */
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

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

export default client;

In this code, we initialize Apollo Client with the GraphQL endpoint and an in-memory cache. The client is then exported for use in your React components.

Step 2: Integrating Apollo Client with React

After initializing Apollo Client, integrate it with your React application. Wrap your application with the ApolloProvider to provide the client to your React components.

Wrap Your Application

In your src/index.js file, import the ApolloProvider and the client from the apolloClient.js file:

/* File: src/index.js */
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import client from './apolloClient';
import App from './App';

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

In this code, we wrap the App component with the ApolloProvider and pass the client as a prop. This setup makes the Apollo Client instance available to all components in the application.

Step 3: Writing and Executing Queries

With Apollo Client set up and integrated with your React application, you can start writing and executing GraphQL queries to fetch data.

Define a GraphQL Query

First, define a GraphQL query to fetch data. Create a new file named queries.js in your project's src directory:

/* File: src/queries.js */
import { gql } from '@apollo/client';

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

In this code, we use the gql function from Apollo Client to define a GraphQL query named GET_USERS that fetches the id, name, and email fields of all users.

Execute the Query in a Component

Next, use the useQuery hook from Apollo Client to execute the query in a React component. Create a new component named Users.js in your project's src directory:

/* File: src/Users.js */
import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_USERS } from './queries';

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

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

  return (
    <div>
      {data.users.map(user => (
        <div> key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default Users;

In this code, we use the useQuery hook to execute the GET_USERS query and fetch the list of users. The component renders the user data, displaying a loading message while the data is being fetched and an error message if there is an error.

Step 4: Adding the Users Component

To display the fetched data in your application, add the Users component to your App component. Update the src/App.js file:

/* File: src/App.js */
import React from 'react';
import Users from './Users';

const App = () => (
  <div>
    <h1>My App</h1>
    <Users />
  </div>
);

export default App;

In this code, we import the Users component and render it inside the App component.

Step 5: Handling Mutations

In addition to fetching data, you can also use Apollo Client to handle mutations, which allow you to modify data on the server. Let's add a mutation to create a new user.

Define a GraphQL Mutation

First, define a GraphQL mutation to create a new user. Add the mutation to the queries.js file:

/* File: src/queries.js */
import { gql } from '@apollo/client';

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

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

In this code, we define a GraphQL mutation named ADD_USER that takes name and email as input parameters and returns the id, name, and email of the newly created user.

Execute the Mutation in a Component

Next, use the useMutation hook from Apollo Client to execute the mutation in a React component. Create a new component named AddUser.js in your project's src directory:

/* File: src/AddUser.js */
import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { ADD_USER, GET_USERS } from './queries';

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser, { loading, error }] = useMutation(ADD_USER, {
    refetchQueries: [{ query: GET_USERS }],
  });

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

  return (
    <div>
      <form> onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        </input>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        </input>
        <button type="submit">Add User</button>
      </form>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
};

export default AddUser;

In this code, we use the useMutation hook to execute the ADD_USER mutation. The handleSubmit function is called when the form is submitted, and it invokes the mutation with the name and email input values. The mutation response is then used to update the list of users by refetching the GET_USERS query.

Step 6: Updating the UI After a Mutation

After adding the AddUser component, you need to update the UI to reflect the changes made by the mutation. One way to achieve this is by refetching the queries associated with the data that was modified. This ensures that the UI is always up-to-date with the latest data.

Using the AddUser Component

Update the App component to include the AddUser component. Modify the src/App.js file:

/* File: src/App.js */
import React from 'react';
import Users from './Users';
import AddUser from './AddUser';

const App = () => (
  <div>
    <h1>My App</h1>
    <AddUser />
    <Users />
  </div>
);

export default App;

In this code, we import the AddUser component and render it above the Users component inside the App component. This setup allows users to add a new user and immediately see the updated list of users.

Testing the Application

To test the application, start the development server:

# Start the development server
npm start

Open your browser and navigate to http://localhost:3000. You should see the list of users fetched from the GraphQL server and a form to add a new user. Fill in the form and submit it to add a new user and see the updated list.

Optimizing Data Fetching with Caching

Apollo Client provides powerful caching capabilities that can significantly improve the performance of your application by reducing the number of network requests. By leveraging the in-memory cache, you can ensure that frequently accessed data is stored locally and quickly retrieved when needed.

Using the In-Memory Cache

When you initialize Apollo Client, you can configure the in-memory cache to cache the results of GraphQL queries:

/* File: src/apolloClient.js */
import { ApolloClient, InMemoryCache } from '@apollo/client';

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

export default client;

In this code, we configure the in-memory cache when initializing Apollo Client. This setup ensures that the results of GraphQL queries are cached and can be quickly retrieved without making additional network requests.

Refetching Data Automatically

When a mutation modifies data that is already cached, you can configure Apollo Client to automatically refetch the affected queries to keep the cache up-to-date. This approach ensures that the UI always displays the latest data.

Example: Refetching Queries

/* File: src/AddUser.js */
import React, { useState } from 'react';
import { useMutation } from '@apollo/client';
import { ADD_USER, GET_USERS } from './queries';

const AddUser = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser, { loading, error }] = useMutation(ADD_USER, {
    refetchQueries: [{ query: GET_USERS }],
  });

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

  return (
    <div>
      <form> onSubmit={handleSubmit}>
        <input>
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        </input>
        <input>
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        </input>
        <button> type="submit">Add User</button>
      </form>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
};

export default AddUser;

In this example, the refetchQueries option is used to refetch the GET_USERS query after the ADD_USER mutation is executed. This ensures that the cache is updated with the new user data, and the UI is automatically refreshed to reflect the changes.

Fun Fact

Did you know that Apollo Client was originally developed by Meteor Development Group? It was created to provide a flexible and scalable solution for managing GraphQL data in client-side applications.

Conclusion

Integrating GraphQL with React using Apollo Client offers a powerful and efficient way to manage data fetching, state management, and caching. By understanding and utilizing Apollo Client's features, you can build highly responsive and scalable React applications. Whether you're fetching data with queries or modifying data with mutations, Apollo Client makes it easy to interact with your GraphQL server and keep your UI in sync with the latest data.