Каково идиоматическое использование запросов и последующего изменения данных в компоненте с помощью хуков?

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 не следует вводить в состояние.

Итак, как я могу отображать обновленных кошек?