I am currently building a Tauri app, and inside the app I render ca. 250 small components at the same time. Each component has some data it needs to fetch and then display (it calls an api and then displays an image depending on the result). Now to my question:

I’m trying to render a loading component while my queries are being executed in parallel in react-query.

I am using react-query hook for data fetching. I have some filters (Playground). I want to call the api only when the applied filters are valid. I am using enabled property to conditionally fetch. But my concern is, I have passed a function to enabled property which would be executed on every re-render. So, if I click on Re-render button, even though my filters was not changed, but the isFiltersValid function is called. In this example isFiltersValid is not a heavy computation, but what if it was a heavy computation function.

I want to use invalidate queries but it doesnt fetch it or trigger it.

I’m using react query to fetch data on a blog post, according to its Id. When I visit a certain blogpost and then navigate to another one, it first presents me the data from the previous blogPost, and then re-render the page with the new information.
It seems that the data is first of all fetched from the cache, and after that get refreshed.

I have a React 18 application and using React Query.

I have a form with 3 inputs and a button:

Facing an infinite render when a query fails using react-query. useQuery should only re-fetch if queryKey changes, or on request failure according to retry parameter.

I want to be able to provide a custom error (properly typed) to react-query’s useQuery hook. The reason for this custom error is to be able to provide to it the status code of the response in case it fails, so I can determine whether or not to use the useErrorBoundary option based on that status.