Saya melaksanakan pelaksanaan asas pengambilan dan pengemaskinian data menggunakan react-query pada aplikasi next.js. Matlamat saya adalah untuk mengemas kini data selepas mutasi. Pada masa ini, data hanya dikemas kini apabila tab dimuatkan semula. Tetapi ia tidak akan berubah tanpa interaksi pengguna.

Saya mendapati bahawa kemas kini data yang berlaku pada muat semula tab adalah disebabkan oleh refetchOnWindowFocus tingkah laku lalai.

Tetapi bagaimanakah ia menjadi tidak sah selepas data dikemas kini di bahagian pelayan? Berikut ialah coretan kod yang berkaitan.

Nota: Saya menggunakan Penghidratan untuk menggunakan fungsi react-query SSR. Dokumentasi

_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) } };
};

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

Sebarang bantuan amatlah dihargai

Kemas kini: refetchInterval：2000 dikemas kini setiap 2 saat, tetapi ini mencetuskan permintaan rangkaian setiap 2 saat, jadi saya tidak pasti ini adalah amalan terbaik untuk pengesahan semula.

Kemas kini: onSuccess方法内的控制台在突变时显示，这意味着逻辑有问题，因为即使密钥不同，这也应该有效：queryClient.invalidateQueries() di mana saya tidak menyatakan sebarang kunci tetapi mencetuskan semua pertanyaan. Tetapi walaupun begitu ia tidak akan dikemas kini. kenapa?