GraphQL 突变

介绍

GraphQL 是一种用于 API 的查询语言，而它的突变（Mutation）功能则是允许修改数据的核心部分。通过突变，GraphQL 可以更好地管理整个应用程序的数据流。本文将介绍 GraphQL 突变的概念、设计以及如何在应用程序中使用它。

突变的概念

在 GraphQL 中，突变是一种允许修改数据的操作。它与查询类似，但是用于修改或创建数据，而不是获取数据。

突变是一个操作类型，它允许我们在 GraphQL Schema 中定义一个或多个函数来修改应用程序中的数据。

突变的设计

突变是一个由一组字段组成的 GraphQL 对象。每个字段都代表一种可用的操作，通常包括创建、更新或删除数据。与查询不同，突变可以修改应用程序的状态。

在 GraphQL Schema 中定义突变需要使用 type Mutation 关键字。这将创建一个新的对象类型，它包含一组用于修改或创建数据的字段。

以下是一个示例突变的定义：

type Mutation {
  createUser(name: String!): User!
}

上面的代码定义了一个名为 createUser 的字段，该字段接受一个必填的 name 参数，并且返回一个 User 对象。

在应用程序中使用突变

在应用程序中使用突变需要使用一个 GraphQL 客户端库。许多流行的 GraphQL 客户端库都支持突变操作，例如 Apollo Client 和 Relay。

使用这些库可以轻松地发送突变请求，并且可以处理响应。这些库还提供了一些方便的功能，如缓存、错误处理和批处理请求等。

以下是一个使用 Apollo Client 发送突变的示例代码：

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

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

function CreateUser({ name }) {
  const [createUser] = useMutation(ADD_USER);

  const handleSubmit = async (event) => {
    event.preventDefault();
    await createUser({ variables: { name } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <button type="submit">Create User</button>
    </form>
  );
}

上面的代码定义了一个名为 CreateUser 组件，用于创建一个新用户。它使用 useMutation 钩子来定义 createUser 突变函数，并在表单提交时调用该函数。

总结

GraphQL 突变是一种用于修改或创建数据的操作类型。它允许我们在应用程序中定义一组可用的操作，例如创建、更新或删除数据。使用突变需要使用 GraphQL 客户端库，并在应用程序中发送请求。常用的 GraphQL 客户端库包括 Apollo Client 和 Relay。