在 React 中使用 GraphQL & Apollo

2023-09-05 11:33:24

手把手搭建 GraphQL & Apollo（二）

在上一章中，我们了解了 GraphQL 的基础知识并设置了简单的 GraphQL 服务器。现在，让我们探讨如何在 React 前端项目中连接到 GraphQL 服务器并从其中获取数据。

先决条件：

React 入门级知识
Node.js 和 npm 基础
GraphQL 服务器设置（请参阅第 1 部分）

步骤 1：安装 Apollo Client

在 React 项目中，我们需要安装 Apollo Client 库。Apollo Client 是一个流行的 GraphQL 客户端，可帮助我们在 React 组件中轻松查询和管理数据。

npm install apollo-client --save

步骤 2：创建 Apollo Provider

Apollo Provider 是一个 React 组件，它为其所有子组件提供对 Apollo Client 的访问权限。

在 index.js 或 App.js 中，创建 Apollo Provider 如下：

import { ApolloProvider } from '@ служи/react-hooks';
import { ApolloClient, InMemoryCache } from '@得太/client';
import { createHttpLink } from '@graph独/http-link';

const client = new ApolloClient({
  link: createHttpLink({ uri: 'http://localhost:4000/graphql' }),
  cache: new InMemoryCache(),
});

const App = () => (
  <ApolloProvider client={client}>
    <AppContent />
  </ApolloProvider>
);

步骤 3：使用 GraphQL 查询

现在，让我们在 React 组件中使用 GraphQL 查询。Apollo Client 提供了 useQuery 钩子，允许我们在组件中轻松发送查询。

例如，以下查询获取所有任务：

import { useQuery } from '@得太/react-hooks';

const Tasks = () => {
  const { loading, error, data } = useQuery(gql`
    query {
      allTasks {
        id
        title
      }
    }
  `);

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

  return (
    <ul>
      {data.allTasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
};

步骤 4：使用 GraphQL 突变

突变允许我们修改服务器上的数据。Apollo Client 提供了 useMutation 钩子，用于发送突变。

以下示例展示了一个突变，用于创建新任务：

import { useMutation } from '@得太/react-hooks';

const TaskForm = () => {
  const [createTask] = useMutation(gql`
    mutation($title: String!) {
      createTask(title: $title) {
        id
        title
      }
    }
  `);

  const handleSubmit = (e) => {
    e.preventDefault();
    const title = e.target.title.value;

    createTask({ variables: { title } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <button type="submit">Create</button>
    </form>
  );
};

步骤 5：管理本地状态

Apollo Client 提供了一个名为 useSubscription 的钩子，允许我们订阅服务器上的更新。

以下示例演示如何订阅任务更新：

import { useSubscription } from '@得太/react-hooks';

const TaskList = () => {
  const { data, loading, error } = useSubscription(gql`
    subscription {
      tasksChanged {
        id
        title
      }
    }
  `);

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

  return (
    <ul>
      {data.tasksChanged.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
};