我有一个问题，在NextJS中混合来自useQuery的查询客户端在服务器和客户端组件中。我有一个服务器组件预取数据：

export default async function HouseholdChooser() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['households'],
    queryFn: getHouseholds,
  });
  
  return (
    <div className="grid flex-1 gap-2">
      <HydrationBoundary state={dehydrate(queryClient)}>
        <HouseholdsList />
      </HydrationBoundary>
   </div>
  );

字符串
以及客户端组件HouseholdsList：

const HouseholdsList = () => {
  const { data } = useQuery({
    queryKey: ['households'],
    queryFn: getHouseholds,
  });

  if (data?.error) {
    toast({ title: data.error.message });
  }

  return (
    <>
      {data.map(({ id, name }) => (
        <Link key={id} href={`/households/${id}`} className="hover:bg-accent p-1">
          {name}
        </Link>
      ))}
    </>
  );

型
我还有一个附加组件：

const AddHousehold = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: createHousehold,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['households']})
    }
  })
  const onSubmit = (data) => {
    mutation.mutate(data);
  };

型
我面临的问题是我的invalidateQueries不工作。我假设这是因为在我的服务器组件（HouseholdChooser）中我使用了new QueryClient()（但我不能在那里使用useQueryClient()，因为它是服务器端组件）。我应该如何在NextJS+useQuery中处理这种类型的问题？
在action方法中，它是否适合invalidateQueries和revalidatePath，或者我们不应该将它们两者混合？我真的找不到任何资源来了解混合NextJS和useQuery的任何良好实践，因此非常感谢任何建议。