Apollo Client 使用

介绍

Apollo Client 是一个强大的状态管理库，专门用于与 GraphQL API 进行交互。它可以帮助你在 React 应用中轻松地获取、缓存和管理数据。Apollo Client 不仅支持查询和修改数据，还提供了强大的缓存机制，使得数据管理更加高效。

在本教程中，我们将从基础开始，逐步讲解如何在 React 应用中使用 Apollo Client 与 GraphQL API 进行交互。

安装 Apollo Client

首先，你需要在项目中安装 Apollo Client 和相关的依赖项。你可以使用 npm 或 yarn 来安装这些包。

bash
npm install @apollo/client graphql

或者

bash
yarn add @apollo/client graphql

配置 Apollo Client

安装完成后，你需要在 React 应用中配置 Apollo Client。通常，你会在应用的入口文件（如 index.js 或 App.js）中进行配置。

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

// 创建 Apollo Client 实例
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql', // 你的 GraphQL API 地址
  cache: new InMemoryCache(),
});

// 将 ApolloProvider 包裹在应用的根组件上
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

在上面的代码中，我们创建了一个 ApolloClient 实例，并将其传递给 ApolloProvider 组件。ApolloProvider 组件会将 Apollo Client 的实例传递给整个应用，使得你可以在任何组件中使用 Apollo Client 的功能。

使用 Apollo Client 进行查询

一旦配置好了 Apollo Client，你就可以在 React 组件中使用它来查询数据了。Apollo Client 提供了一个 useQuery Hook，用于执行 GraphQL 查询。

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

// 定义 GraphQL 查询
const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`;

function BooksList() {
  // 使用 useQuery Hook 执行查询
  const { loading, error, data } = useQuery(GET_BOOKS);

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

  return (
    <ul>
      {data.books.map((book, index) => (
        <li key={index}>
          {book.title} by {book.author}
        </li>
      ))}
    </ul>
  );
}

export default BooksList;

在这个例子中，我们定义了一个 GET_BOOKS 查询，并使用 useQuery Hook 来执行它。useQuery 返回一个包含 loading、error 和 data 的对象，你可以根据这些状态来渲染不同的 UI。

使用 Apollo Client 进行突变

除了查询数据，Apollo Client 还可以用于执行 GraphQL 突变（Mutation）。突变通常用于创建、更新或删除数据。

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

// 定义 GraphQL 突变
const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      title
      author
    }
  }
`;

function AddBookForm() {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

  // 使用 useMutation Hook 执行突变
  const [addBook, { data, loading, error }] = useMutation(ADD_BOOK);

  const handleSubmit = (e) => {
    e.preventDefault();
    addBook({ variables: { title, author } });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <input
        type="text"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        placeholder="Author"
      />
      <button type="submit">Add Book</button>
    </form>
  );
}

export default AddBookForm;

在这个例子中，我们定义了一个 ADD_BOOK 突变，并使用 useMutation Hook 来执行它。当表单提交时，我们会调用 addBook 函数，并将输入的数据作为变量传递给突变。

实际案例：构建一个简单的图书管理应用

让我们通过一个实际案例来展示 Apollo Client 的使用。我们将构建一个简单的图书管理应用，用户可以查看图书列表并添加新的图书。

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

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

// 定义 GraphQL 查询
const GET_BOOKS = gql`
  query GetBooks {
    books {
      title
      author
    }
  }
`;

// 定义 GraphQL 突变
const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      title
      author
    }
  }
`;

function BooksList() {
  const { loading, error, data } = useQuery(GET_BOOKS);

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

  return (
    <ul>
      {data.books.map((book, index) => (
        <li key={index}>
          {book.title} by {book.author}
        </li>
      ))}
    </ul>
  );
}

function AddBookForm() {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

  const [addBook, { data, loading, error }] = useMutation(ADD_BOOK);

  const handleSubmit = (e) => {
    e.preventDefault();
    addBook({ variables: { title, author } });
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <input
        type="text"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        placeholder="Author"
      />
      <button type="submit">Add Book</button>
    </form>
  );
}

function App() {
  return (
    <div>
      <h1>Books List</h1>
      <BooksList />
      <h2>Add a New Book</h2>
      <AddBookForm />
    </div>
  );
}

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

export default Root;

在这个案例中，我们创建了一个简单的图书管理应用。用户可以查看现有的图书列表，并通过表单添加新的图书。我们使用了 Apollo Client 的 useQuery 和 useMutation Hook 来分别处理查询和突变。

总结

通过本教程，你已经学会了如何在 React 应用中使用 Apollo Client 与 GraphQL API 进行交互。我们从安装和配置 Apollo Client 开始，逐步讲解了如何使用 useQuery 和 useMutation Hook 来执行查询和突变。最后，我们通过一个实际案例展示了如何构建一个简单的图书管理应用。

Apollo Client 是一个非常强大的工具，它不仅简化了与 GraphQL API 的交互，还提供了强大的缓存机制，使得数据管理更加高效。希望本教程能帮助你更好地理解和使用 Apollo Client。

附加资源

练习

尝试扩展图书管理应用，添加一个功能来删除图书。
修改查询，使其能够根据作者姓名筛选图书。
探索 Apollo Client 的缓存机制，尝试手动更新缓存中的数据。

祝你学习愉快！

介绍​

安装 Apollo Client​

配置 Apollo Client​

使用 Apollo Client 进行查询​

使用 Apollo Client 进行突变​

实际案例：构建一个简单的图书管理应用​

总结​

附加资源​

练习​

介绍