react-query customHook refetchOnWindowFocus

boogiehsows 0
Viewed 21

I am creating individual hooks using react-query. Where would I add in refetchOnWindowFocus: false ? as it is not currently being read and the data is being re-fetched when returning to the window.

    const useFetchOverview = () => {
        return useQuery(["userData", { refetchOnWindowFocus: false }],
            async () => {
                const { data } = await axios({
                    url: useFetchOverviewUrl,
                    headers: { ...getHeaders(reduxState) },
                    method: "get"
                });
                return data;
            });
    };

    const { isLoading, data: userOverviewData } = useFetchOverview();
react-query reactjs
1 Answers

this should be third parameter after fuinction:

return useQuery(["userData"],
            async () => {
                const { data } = await axios({
                    url: useFetchOverviewUrl,
                    headers: { ...getHeaders(reduxState) },
                    method: "get"
                });
                return data;
            }, { refetchOnWindowFocus: false });

ex: useQuery(queryKey, queryFn?, options)

check this for your reference: https://tanstack.com/query/v4/docs/reference/useQuery?from=reactQueryV3&original=https://react-query-v3.tanstack.com/reference/useQuery

OR you can write it for global:

const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
     },
   },
 })
Abasaheb Gaware0
Related