这样使用useQuery是反模式吗？

Question

我有一个使用像这样的打字稿的反应查询块

export const useFoo = () =>
  useQuery(['example-key'], (): Nullable<Foo> => null);

启动后，我有一个 onClick 处理程序，像这样调用 useMutaion

export const useUpdateFoo = () => {
  const queryClient = useQueryClient();

  return useMutation(
    ['example-useMutation_key'],
    async () => {
      // api stuff, assume that this code return correct data
    },
    {
      onSuccess: (response) => {
        queryClient.setQueryData(['example-key'],() => response);
      },
    }
  );
};

我的问题是这是一种反模式吗？我的同事说，如果我的 useQuery 没有 FETCH 任何东西，那么它不应该属于 use useQuery？如果没有，这种方法有什么限制吗？

Answer 1

是的，这是一种反模式

TanStack Query 是一个全局状态管理库，但它期望能够使用

queryFn

来刷新状态。

例如refetchOnWindowFocus（默认启用）可以在切换选项卡时刷新（再次调用queryFn）。
因此

() => null

会将

['example-useMutation_key']

的数据重置为

null

，这可能不是所需的行为。