我在next.jsapp上用react-query实现了一个数据获取和更新的基本实现，目标是在mutation后更新数据，目前数据只在tab刷新时更新，但没有用户交互的情况下，数据不会发生变化。
我发现标签刷新时的数据更新是因为refetchOnWindowFocus的默认行为。
但是如何在服务器端更新数据后失效。这里是相关的代码片段。

注意：我使用的是Hydration. Docs的react-query****SSR功能

_app.jsx

const [queryClient] = React.useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>

Home.jsx

const {data} = useQuery({
    queryKey: [queryKeys.key],
    queryFn: fetchData,
    staleTime: 1000 * 10, // this doesn't affect on anything
    //refetchInterval: 2000, this updates every 2 seconds
  });

  return (
    <div>
      <Article articles={data} />
    </div>
  );
   export const getServerSideProps = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery([queryKeys.key], fetchData);
  return { props: { dehydratedState: dehydrate(queryClient) } };
};

Article.jsx

const Article = ({articles}) => {
  const [title, setTitle] = useState("");
  const queryClient = new QueryClient();

  const { mutate } = useMutation({
    mutationFn: async (article) => {
      return await axios.post(url, article);
    },
    onSuccess: (data) => {
      console.log("data", data) // data is displayed, onSuccess is called
      queryClient.invalidateQueries({ queryKey: [queryKeys.key] });
    },
  });

  const changeTitleHandleClick = () => {
    mutate({
      id: new Date(),
      title: title
    });
    setTitle("");
  };
  ....

任何帮助将不胜感激

UPDATE：refetchInterval: 2000每2秒更新一次，但这会每2秒触发一次网络请求，所以我不确定这是重新验证的最佳做法。
UPDATE：onSuccess方法内部的控制台在mutation时显示，这意味着逻辑出了问题，因为即使键不同，这也应该起作用：queryClient.invalidateQueries()，我没有指定任何键，而是触发所有查询。但即使这样也不会更新。为什么？