Getting Started with Apollo Client

1. Introduction

In this tutorial, we will walk through the process of setting up and using the Apollo Client in an HTML project. Apollo Client is a comprehensive state management library for JavaScript that allows you to manage both local and remote data with GraphQL. By the end of this guide, you'll have a fundamental understanding of how to use Apollo Client with GraphQL.

What you'll learn:
- How to install Apollo Client
- How to set up Apollo Client in your project
- How to fetch and manage data with Apollo Client and GraphQL

Prerequisites:
- Basic knowledge of HTML and JavaScript
- Familiarity with GraphQL is helpful but not required

2. Step-by-Step Guide

Installing Apollo Client

Apollo Client is available as a package on npm. You can install it using the following command:

npm install @apollo/client graphql

Setting Up Apollo Client

Once you have Apollo Client installed, you can import it into your project and create a new instance of ApolloClient:

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

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

Here, uri is the URL to your GraphQL server. The InMemoryCache is used for caching GraphQL results.

Fetching Data with Apollo Client

To fetch data with Apollo Client, you'll use the useQuery hook. The useQuery hook takes a GraphQL query string and returns an object with your query result:

import { useQuery } from "@apollo/client"
import gql from "graphql-tag";

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);

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

  return data.dogs.map(({ id, breed }) => (
    <div key={id}>
      <p>{breed}</p>
    </div>
  ));
}

In this example, we're fetching a list of dogs from our GraphQL server. If the query is still loading, we return a loading message. If there's an error, we return an error message. Once the data is ready, we map over it and display each dog's breed.

3. Code Examples

The following are some code examples that demonstrate basic Apollo Client usage:

Example 1: Creating an Apollo Client Instance

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

// Create a new Apollo Client instance
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint', // Replace with your GraphQL endpoint
  cache: new InMemoryCache(), // Set up caching
});

Example 2: Fetching Data with Apollo Client

import { useQuery } from "@apollo/client"
import gql from "graphql-tag";

// Define your query
const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

// Use the useQuery hook to fetch data
function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);

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

  // Render data once it's ready
  return data.dogs.map(({ id, breed }) => (
    <div key={id}>
      <p>{breed}</p>
    </div>
  ));
}

4. Summary

In this tutorial we've covered how to install and set up Apollo Client, and how to fetch data from a GraphQL server using Apollo Client. With these basics, you're ready to further explore the capabilities of Apollo Client and GraphQL.

Next Steps:
- Learn more about Apollo Client's advanced features like caching, mutations, and subscriptions
- Practice fetching and manipulating data from a real GraphQL API

Additional Resources:
- Apollo Client Documentation
- GraphQL Documentation

5. Practice Exercises

Exercise 1: Install Apollo Client in a new project and set up a new ApolloClient instance.

Solution:

npm install @apollo/client graphql

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

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

Exercise 2: Write a GraphQL query to fetch a list of cats, including their id and name, and use the useQuery hook to fetch this data.

Solution:

import { useQuery } from "@apollo/client"
import gql from "graphql-tag";

const GET_CATS = gql`
  query GetCats {
    cats {
      id
      name
    }
  }
`;

function Cats() {
  const { loading, error, data } = useQuery(GET_CATS);

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

  return data.cats.map(({ id, name }) => (
    <div key={id}>
      <p>{name}</p>
    </div>
  ));
}

Tips for further practice: Try fetching different data or using different GraphQL queries. Experiment with the useMutation and useSubscription hooks to manipulate data and subscribe to changes.