没有组件的 Apollo 客户端突变 - JavaScript

在使用 Apollo GraphQL 客户端时，我们通常会使用 React 组件来发送和处理数据。但是，如果我们想在没有组件的情况下发送数据怎么办？这时候，我们可以使用没有组件的 Apollo 客户端突变来实现这个目标。本文将介绍如何使用 JavaScript 编写没有组件的 Apollo 客户端突变。

首先，我们需要安装并导入所需的包

我们需要安装 @apollo/client 包来使用 Apollo 客户端。使用以下命令来安装该包：

npm install @apollo/client

接下来，我们需要导入我们将在代码中使用的所需库和包。具体来说，我们需要导入 ApolloClient、gql 和 Mutation：

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

客户端初始化

在设置客户端之前，我们需要了解一些重要的参数。以下是我们需要设置的参数：

• uri：GraphQL API 的 URL。
• cache：启用默认缓存的选项。
• headers：要传递到 GraphQL API 的标头。

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: `Bearer ${token}`,
  },
});

创建变异

现在，对于没有组件的 Apollo 客户端突变，我们需要创建变异。使用以下代码创建突变：

const CREATE_USER_MUTATION = gql`
  mutation CreateUserMutation($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      username
      email
    }
  }
`;

这里我们用到了 gql 函数，它用于将我们的 GraphQL 查询转换为有效的语法树。

使用突变进行数据操作

我们可以使用 Mutation 组件来发送数据并处理返回的数据。下面是发送数据的示例：

const createUser = async (input) => {
  const { data } = await client.mutate({
    mutation: CREATE_USER_MUTATION,
    variables: { input },
  });

  return data.createUser;
};

组装及使用

组装以上三个代码片段，以使用 Apollo 客户端无组件突变可进行简单的数据输入操作。具体代码如下：

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: `Bearer ${token}`,
  },
});

const CREATE_USER_MUTATION = gql`
  mutation CreateUserMutation($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      username
      email
    }
  }
`;

const createUser = async (input) => {
  const { data } = await client.mutate({
    mutation: CREATE_USER_MUTATION,
    variables: { input },
  });

  return data.createUser;
};

createUser({username: 'demo', email: 'demo@example.com'}).then(data => {
  console.log('User created:', data);
});

这将检索来自 GraphQL API 的数据，并在控制台上显示创建的用户。

结论

使用无组件的 Apollo 客户端突变，可以更灵活地管理数据操作中的请求和响应。像我们在上面的示例中所示的那样，您只需要导入所需的包并设置 GraphQL API URL、缓存、标头以及所需的突变即可发送数据。