Sahkan semula selepas mutasi dalam pertanyaan tindak balas: panduan langkah demi langkah

Question

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?

Answer 1

Cara anda melaksanakan mutasi, ia harus mengambil semula pertanyaan selepas mutasi berjaya:

onSuccess: () => {
  queryClient.invalidateQueries({ queryKey: [queryKeys.key] });
},

Jika ini tidak berjaya, mutasi anda tidak berjaya. Semak sama ada panggilan balik onSuccess dipanggil.

Jika panggilan balik onSuccess 回调，但未重新提取您的查询，则可能意味着 queryKey dipanggil, tetapi pertanyaan anda tidak diambil semula, ini mungkin bermakna

ketidakpadanan. Untuk tujuan ujian, cuba kembangkan penapis kepada:

queryClient.invalidateQueries()

hendaklah mengambil semula semua queryKeypertanyaan. Jika ia berkesan, anda tahu penapis anda tidak sepadan.

Lihat dengan teliti, anda gagal:

queryKey: [queryKeys.key]

Tetapi dalam cangkuk tersuai anda, anda menggunakan:

queryKey: [queryKeys.articles]

@tanstack/react-query-devtoolsJadi nampaknya mereka memang berbeza dan oleh itu tidak sepadan. Selain itu, pastikan anda menggunakan untuk lebih memahami pertanyaan dan kekunci dalam cache. 🎜

Answer 2

Masalahnya ialah dalam komponen Article.jsx Saya mencipta QueryClient baharu pada setiap pemaparan, jadi ia mendapat cache baharu dan oleh itu tidak dikemas kini.
Sebaliknya, saya perlu menggunakan cangkuk useQueryClient, yang mengembalikan kejadian semasa.
const queryClient = useQueryClient();