Query Client Provider USE IN AS PROVIDER

QueryClientProvider.js

// Important Notes
queryFn: ApiServices.getLandingPage(query)  // ❌ executes immediately

queryFn: () => ApiServices.getLandingPage(query) // ✅ pass a function. / queryFn must be a function that returns a Promise
// React Query will call it internally, handle await, and track isLoading, isError, data automatically


// mutate fn
mutationFn: async (payload) => {
  const res = await ApiServices.registerUserWithRoles(payload);  // Or with extra logic:
  if (!res.success) throw new Error(res.message);
  return res;
}

// When to use async/await in mutationFn
// ### Only when you want to:
// ### Check API response (res.success)
// ### Transform data before returning
// ### Throw custom error messages
// ### Otherwise, direct return of the service function is enough.


mutationFn: (payload) => ApiServices.registerUserWithRoles(payload) // Shorter version (when you don’t need extra checks)


// code
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      staleTime: 5 * 60 * 1000,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
    mutations: {
      retry: 0,
    },
  },
});


ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools />
  </QueryClientProvider>
);