使用钩子查询然后更改组件中数据的惯用用法是什么？

Question

使用apollo-client的正确方法是在首次加载组件时获取数据，然后在突变后更新此数据。 我正在使用钩子useQuery和useMutation

类似的东西：

const DataComp = () => {
  const { cats } = useQuery(CATS_QUERY);

  return (
    <div>
      <button
        onClick={async () => {
          const [renameCats, { loading }] = useMutation(RENAME_CATS);
          const newCats = await renameCats();
        }}
      />
      <div>
        {cats.map(cat => (
          <p>{cat.name}</p>
        ))}
      </div>
    </div>
  );
};

我读到某处（不记得在哪里）useQuery的结果不应置入状态。

那我怎么显示更新的猫呢？