Why API called twice?

[devhyunjae]

demo: https://tz98lg.csb.app/
code: https://codesandbox.io/p/sandbox/react-query-api-twice-call-tz98lg

I know it will work when i pass as a prop. But my real world code has a deeeeeep children components and I don't want to drill down this as a prop and react-query does the magic to fetch the api only once. Can somebody help me? Thanks

[TkDodo]

Because the default staleTime is zero and you conditionally render components. I'm describing this exact scenario here:

https://tkdodo.eu/blog/react-query-as-a-state-manager

[devhyunjae]

Thanks I tried adding staleTime and refetchOnMount: false. delete the conditional render and always render the list.
But still it is calling twice...😰

[TkDodo]

you have set the values on an unused queryClient in App.tsx. The one that gets passed to the QueryClientProvider is in index.tsx, and that one still has the default settings.

[devhyunjae]

Thanks mate