Using Apollo Client with GraphQL: Practical Examples

Introduction to Apollo Client

Apollo Client is a powerful state management library that enables you to work with GraphQL APIs efficiently. It simplifies data fetching, caching, and state management in your applications. This guide provides practical examples to help you get started.

Setting Up Apollo Client

To begin using Apollo Client, you need to install the necessary packages. You can do this using npm or yarn:

npm install @apollo/client graphql

yarn add @apollo/client graphql

Basic Configuration

Next, you will need to set up the Apollo Client in your application. Here’s a simple configuration example:

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

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

function App() {
  return (
    <ApolloProvider client={client}>
      <YourComponent />
    </ApolloProvider>
  );
}

Making Queries with Apollo Client

Once your Apollo Client is configured, you can start making queries. For example, let’s say you want to fetch a list of users from your GraphQL API.

Example Query

Here’s how you can create a query using Apollo Client:

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: {error.message}</p>;

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

Explanation

useQuery: This hook is used to execute the query and returns loading, error, and data states.
gql: This tag is used to define your GraphQL query.
Loading/Error Handling: Basic handling for loading and error states.

Mutations with Apollo Client

Mutations are essential for modifying data on the server. Here’s how you can create a mutation to add a new user:

Example Mutation

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 AddUserForm() {
  let name, email;
  const [addUser, { data, loading, error }] = useMutation(ADD_USER);

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

  return (
    <form onSubmit={handleSubmit}>
      <input ref={node => name = node} placeholder="Name" />
      <input ref={node => email = node} placeholder="Email" />
      <button type="submit">Add User</button>
      {loading && <p>Adding user...</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

Summary of Mutation Example

useMutation: Hook used to execute a mutation.
Variables: Pass data to the mutation using variables.
Form Handling: Simple form to capture user input and submit it.

Conclusion

In this guide, we have covered the basics of setting up Apollo Client with GraphQL, including making queries and mutations. These examples should provide a solid foundation for integrating Apollo Client into your applications. For more advanced features and best practices, consider exploring the official Apollo Client documentation.

A Comprehensive Guide to Apollo Client with GraphQL