reactjs - 停止 `useMutation` 重新渲染组件并忽略结果

Question

我有一个这样调用的突变(这不是实际的突变调用，而是一个最小的例子):

const App = () => {
  const [myMutation] = useMutation(gql`
    mutation Test($updateUserId: ID!, $updateUserInput: UpdateUserInput!) {
      updateUser(id: $updateUserId, input: $updateUserInput) {
        id
        firstname
        age
      }
    }
  `);

  // Runs every time this component is rendered
  console.log("rendered");

  // Called when the button is clicked
  const update = () => {
    myMutation({
      variables: {
        updateUserId: 1,
        updateUserInput: {
          age: Math.round(Math.random() * 10 + 5) // Set a random age from 5 - 15
        }
      }
    });
  };

  return (
    <>
      <h1>Update Test</h1>
      <button onClick={update}>Update!</button>
    </>
  );
};

每当 onClick 被调用时，整个组件都会被重新渲染。这不是我想要的，因为我不关心突变的结果。有没有办法阻止 myMutation 导致重新渲染，并完全忽略结果？

Answer 1

useMutation 是一个钩子(Hook)，它有 state 导致重新渲染

请参阅下面的 useMultation 类型:

export interface MutationResult<TData = any> {
    data?: TData | null;
    error?: ApolloError;
    loading: boolean;
    called: boolean;
    client: ApolloClient<object>;
}

loading 状态是导致重新渲染的状态，因此在您 delcare 的组件中 useMutation 它将由于该 state 而重新渲染

---

一个可能的修复方法是将带有 useMutation 的组件与另一个组件分开

像这样:

function App() {
  return (
    <>
      <Header />  // <-- this coponent won't re-render
      <UpdateUserButton />  // <-- useMutation is in here!
    </>
  );
}

检查现场示例: