React Apollo 客户端的 Mutation 组件中的 refetchQueries 不起作用

Java

React Apollo 是一个用于构建与GraphQL API通信的JavaScript库。它提供了一系列组件和工具，使得在React应用中进行GraphQL查询、变更和订阅变得非常简单和高效。其中，Mutation 组件用于发送GraphQL变更操作（如创建、更新或删除数据），并且可以通过 refetchQueries 属性来指定需要重新获取数据的查询。

然而，有时候我们可能会遇到 Mutation 组件的 refetchQueries 属性不起作用的情况。这可能是因为一些常见的错误或误解导致的。下面我们将通过一个具体的案例来说明这个问题，并提供解决方案。

假设我们有一个简单的待办事项列表应用，我们可以通过 GraphQL 查询获取待办事项列表，通过 Mutation 组件创建新的待办事项并刷新列表。下面是一个简化的示例代码：

Javascript
import React from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const GET_TODOS = gql<code>
  query GetTodos {
    todos {
      id
      text
      completed
    }
  }
</code>;
const CREATE_TODO = gql<code>
  mutation CreateTodo($text: String!) {
    createTodo(text: $text) {
      id
      text
      completed
    }
  }
</code>;
const TodoApp = () => {
  const { loading, error, data } = useQuery(GET_TODOS);
  const [createTodo] = useMutation(CREATE_TODO, {
    refetchQueries: [{ query: GET_TODOS }],
  });
  const handleCreateTodo = () => {
    createTodo({ variables: { text: 'New Todo' } });
  };
  if (loading) return 
Loading...
;
  if (error) return 
<img src="https://img.izhida.com/topic/e80f17310109447772dca82b45ef35a5.jpg" alt="etc"><br>etc
Error :(
;
  return (
    <div>
      <ul>
        {data.todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={handleCreateTodo}>Create Todo</button>
    </div>
  );
};
export default TodoApp;

在上面的代码中，我们使用 useQuery 进行待办事项列表的查询，使用 useMutation 来创建新的待办事项。在 createTodo 变异中，我们通过 refetchQueries 属性来指定在创建待办事项后需要重新获取待办事项列表的查询。

然而，当我们点击 "Create Todo" 按钮后，我们发现待办事项列表并没有刷新。这是因为默认情况下，Mutation 组件并不会自动重新获取查询。解决这个问题的一个简单方法是使用 useMutation 的 onCompleted 回调函数，在回调函数中手动重新获取待办事项列表。修改上面的代码如下：

Javascript
const [createTodo] = useMutation(CREATE_TODO, {
  onCompleted: () => {
    refetch();
  },
});

在这个示例中，我们通过调用 refetch 函数来手动重新获取待办事项列表。这样，当创建待办事项成功后，列表将自动刷新。

解决 React Apollo Mutation 组件的 refetchQueries 不起作用的问题

在上面的案例中，我们遇到了 React Apollo Mutation 组件的 refetchQueries 属性不起作用的问题。这个问题的原因是 Mutation 组件默认不会自动重新获取查询。为了解决这个问题，我们可以使用 useMutation 的 onCompleted 回调函数，在回调函数中手动重新获取数据。这样，我们就可以确保在变更操作完成后，及时地获取最新的数据。

React Apollo 提供了强大的工具和组件，使得在React应用中与GraphQL API进行交互变得非常简单和高效。Mutation 组件是其中一个非常有用的组件，用于发送GraphQL变更操作。然而，有时候我们可能会遇到 Mutation 组件的 refetchQueries 属性不起作用的情况。通过使用 useMutation 的 onCompleted 回调函数，我们可以手动重新获取查询数据，解决这个问题。

希望本文能帮助你理解并解决 React Apollo Mutation 组件的 refetchQueries 属性不起作用的问题。祝你在使用React Apollo构建GraphQL应用时取得成功！