一、useMutation

useMutation是一个 React Hook，它通常与 Apollo Client 一起使用，用于在 React 应用程序中执行 GraphQL 突变（Mutation）操作。这个 Hook 提供了一个简单的 API 来发送 GraphQL 突变请求，并处理响应和错误。

二、使用

1、导入useMutation

从@apollo/client包中导入useMutation

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

2、定义Graphql突变

定义一个Graphql突变，通常是一个字符串，表示你想要执行的突变操作

const ADD_TODO = gql`mutation AddTodo($text: String!) {addTodo(text: $text) {idtextcompleted}}
`;

3、调用定义的Graphql突变

const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);

突变的发生不是由useMutation执行引起的，而是由定义的Graphql突变引起的，在本文中，既执行addTodo函数发生突变。 

4、执行突变

当你想要添加一个待办事项时，你可以调用 addTodo 函数，并传入必要的变量

const handleAddTodo = (text) => {addTodo({ variables: { text } });
};

5、响应错误

在组件中根据data、loading、error来更新UI或处理错误

if (error) {console.error(error);
} else if (data) {console.log(data);
} else if(loading) {console.log(loading);
} 

三、

useMutation hook返回一个数组，我们可以将其分解为两个元素。在第一个元素中，我们返回一个函数，在这种情况下，我们可以调用它执行我们的突变操作。对于下一个元素，我们可以再次分解一个对象该对象返回给我们loading ， error和data 。

import { useMutation } from "@apollo/react-hooks";
import { gql } from "apollo-boost";const CREATE_POST = gql`mutation CreatePost($title: String!, $body: String!) {insert_posts(objects: { body: $body, title: $title }) {affected_rows}}
`;function NewPost() {const [title, setTitle] = React.useState("");const [body, setBody] = React.useState("");const [createPost, { loading, error }] = useMutation(CREATE_POST);function handleCreatePost(event) {event.preventDefault();// the mutate function also doesn't return a promisecreatePost({ variables: { title, body } });}return (<div><h1>New Post</h2><form onSubmit={handleCreatePost}><input onChange={(event) => setTitle(event.target.value)} /><textarea onChange={(event) => setBody(event.target.value)} /><button disabled={loading} type="submit">Submit</button>{error && <p>{error.message}</p>}</form></div>);
}

但是，与查询不同，我们不使用loading或error来有条件地渲染某些内容。 我们通常在诸如提交表单的情况下使用loading ，以防止多次提交表单，以避免不必要地执行相同的更改(如您在上面的示例中看到的)。

我们使用error向用户显示我们的突变出了什么问题。 例如，如果未提供突变所需的某些值，则我们可以轻松地使用该错误数据在页面中有条件地呈现错误消息，以便用户希望可以解决问题。

与将变量传递给useMutation的第二个参数useMutation ，当某些事情发生时，例如当突变完成和出现错误时，我们可以访问几个有用的回调。 这些回调分别命名为onCompleted和onError 。

onCompleted回调使我们可以访问返回的突变数据，并且在完成突变后执行某些操作(例如转到另一个页面)非常有帮助。 当突变存在问题时， onError回调为我们提供了返回的错误，并为我们提供了处理错误的其他模式。