Rumah > Soal Jawab > teks badan
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?
P粉6776848762024-03-26 11:50:35
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
queryClient.invalidateQueries()hendaklah mengambil semula semua
queryKey
pertanyaan. 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-devtools
Jadi nampaknya mereka memang berbeza dan oleh itu tidak sepadan. Selain itu, pastikan anda menggunakan untuk lebih memahami pertanyaan dan kekunci dalam cache. 🎜P粉2310799762024-03-26 11:47:03
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();