我在 next.js 應用程式上使用 react-query 實作了資料擷取和更新的基本實作。 我的目標是在突變後更新數據。 目前，資料僅在選項卡刷新時更新。但如果沒有用戶交互，它就不會改變。

我發現選項卡刷新時發生資料更新是由於 refetchOnWindowFocus 預設行為。

但是伺服器端更新資料後如何失效呢？ 這是相關的程式碼片段。

注意：我正在使用 Hydration 來使用 react-query SSR 功能。文件

_app.jsx

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

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

首頁.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) } };
};

文章.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("");
  };
  ....

任何幫助將不勝感激

更新：refetchInterval：2000每2秒更新一次，但這會每2秒觸發網路請求，所以我不確定這是重新驗證的最佳實踐。

更新：onSuccess方法內的控制台在突變時顯示，這表示邏輯有問題，因為即使金鑰不同，這也應該有效：queryClient .invalidateQueries() 其中我沒有指定任何鍵而是觸發所有查詢。 但即使這樣也不會更新。為什麼？