使用 Fetch 使用 GraphQL API - React 客户端

在使用 React 开发应用程序时，您可能需要调用一个 GraphQL API 来获取数据。在本教程中，我们将使用 Fetch 和 GraphQL 来向您演示如何构建 React 应用程序的客户端。

准备工作

在使用Fetch调用GraphQL之前，您需要确保您的应用程序中具有以下运行时环境：

• React 16 或更高版本
• 一个 GraphQL API
• 基础的 JavaScript 和 CSS 技能

使用 Fetch 调用 GraphQL API

在 React 中，您可以使用 Fetch 从客户端调用 GraphQL API。在这里，我们将使用 Fetch 发送一个 POST 请求。此请求将携带包含 GraphQL 查询的正文，并将其发送到您的 GraphQL API 服务器。

以下是一个简单的示例，演示如何使用 Fetch 发送 GraphQL 查询：

// 定义 GraphQL 查询
const query = `
query {
  user(id: "12345") {
    name
    email
  }
}
`;

// 使用 Fetch 发送 GraphQL 查询
fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  body: JSON.stringify({ query })
})
  .then(response => response.json())
  .then(data => console.log('data returned:', data));

在上面的示例中，我们首先定义了一个 GraphQL 查询字符串。然后，我们使用 Fetch 将查询字符串包装在 JSON 对象中，并将其发送到 /graphql 端点。在这个例子中，我们将使用 fetch() 函数来发送 POST 请求。

在 React 中使用 Fetch 调用 GraphQL API

现在，您已经知道如何使用 Fetch 发送一个 GraphQL 查询。接下来，我们将看看如何在您的 React 应用程序中使用 Fetch 来调用 GraphQL API。

创建 React 组件

首先，让我们创建一个简单的 React 组件，它将使用 Fetch 调用 GraphQL API 并显示返回的数据。在这个例子中，我们将使用一个组件来显示一个特定用户的名称和电子邮件地址。

import React, { useState, useEffect } from 'react';

function User(props) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify({ query: `
        query {
          user(id: "${props.id}") {
            name
            email
          }
        }
      ` })
    })
      .then(response => response.json())
      .then(data => setUser(data.data.user));
  }, [props.id]);

  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default User;

在上面的示例中，我们定义了一个 User 组件，并使用了 useState 和 useEffect 钩子。在 useEffect 钩子中，我们使用 Fetch 发送一个 GraphQL 查询，并在数据返回后将其存储在组件的本地状态中。

返回的数据包含用户名和电子邮件地址，我们将它们渲染到页面上。如果数据尚未返回，则显示 "加载中..." 字符串。

使用 React 组件

现在，我们已经创建了一个 React 组件，可以使用它来在页面上显示一个特定用户的名称和电子邮件地址。在这个例子中，我们使用了一个简单的 App 组件来渲染 User 组件。

import React from 'react';
import User from './User';

function App() {
  return (
    <div>
      <h1>React GraphQL Demo</h1>
      <User id="12345" />
    </div>
  );
}

export default App;

在上面的示例中，我们引入 User 组件并将其呈现为 App 组件的子元素。我们还将 id 属性传递给 User 组件，让它知道需要获取的用户的 ID。

现在，您已经知道如何使用 Fetch 和 GraphQL 在 React 应用程序中调用 API。使用这种方法，您可以在组件中调用 GraphQL，以更好地管理应用程序的数据。