如何在 React 中使用 GraphQL

在React中使用GraphQL需要以下步骤：

安装所需的包：

首先，你需要安装GraphQL相关的包。通常你会需要graphql和@apollo/client：

npm install graphql @apollo/client

设置Apollo Client：

在你的应用中设置Apollo Client，它将用于发送GraphQL查询请求。

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql', // 你的GraphQL服务器地址
  cache: new InMemoryCache()
});

使用ApolloProvider包裹你的应用：

在你的根组件中使用ApolloProvider，将Apollo Client提供给你的应用。

import { ApolloProvider } from '@apollo/client';
// ...
<ApolloProvider client={client}>
  <App />
</ApolloProvider>

创建GraphQL查询：

使用gql标签来定义你的GraphQL查询。

import { gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

在组件中使用GraphQL查询：

使用useQuery hook来发送你的GraphQL查询。

import { useQuery } from '@apollo/client';

function Users() {
  const { loading, error, data } = useQuery(GET_USERS);

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

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

在这个例子中，GET_USERS查询将获取所有用户的id和name。

发送变异（Mutation）：

如果你需要修改服务器上的数据，你可以使用useMutation hook。

import { useMutation } from '@apollo/client';

const ADD_USER = gql`
  mutation AddUser($name: String!) {
    addUser(name: $name) {
      id
      name
    }
  }
`;

function AddUserForm() {
  let input;

  const [addUser] = useMutation(ADD_USER);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addUser({ variables: { name: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add User</button>
      </form>
    </div>
  );
}

这个例子中，ADD_USER变异将在服务器上创建一个新用户，并返回新用户的id和name。

这些是使用GraphQL在React中的基本步骤。你可以根据具体需求进一步深入学习GraphQL的高级用法，例如分页、参数传递、订阅等。同时，记得要配置你的GraphQL服务器以便接受和处理相应的查询和变异。