What are the difference between useInfiniteQuery vs QueryClientProvider usage in React Query?

[elianrichard]

So I've encountered a confusion on the preferable usage of QueryClientProvider and useInfiniteQuery. I've been using the useInfiniteQuery function as a global state on some of the rendered components at the same time. Then I faced a problem where there is a component which has not been rendered yet to fetch the same data using the same useInfiniteQuery. When the component is triggered to render, it will cause the useInfiniteQuery to fetch again. I've solved this problem by giving an queryOptions of enabled set to false, so the useInfiniteQuery will not fetch automatically.

Sandbox Code (Note: You might want to set the Network into slow 3G, and try to use the enabled: false query option).

Is this the preferred way to use React Query or is it better if I just use QueryClientProvider? Are there any pros and cons regarding both of the options?

[elianrichard]

Answered in https://stackoverflow.com/questions/72044183/what-are-the-difference-between-useinfinitequery-vs-queryclientprovider-usage-in