react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
📣-announcements
`useSuspenseQuery` is blocking my upgrade to v5, any alternative solutions?
I'm trying to upgrade from v4 to v5, and the only change blocking my path is that
suspense: boolean was removed as an option on useQuery and replaced with separate hooks like useSuspenseQuery.
I'm using graphql-codegen to generate all of my queries automatically. But of course they are all generated as useQuery.
In V4, I was able to simply pass an option to make my queries use suspense to make queries use suspense....useInfiniteQuery jump to specific data
Hi! I'm using bi-directional useInfiniteQuery and maxPages to load older/newer messages. It's working great but now I want to be able to jump to a specific message that is not yet loaded. Ideally i would like to only fetch a range of messages around the target message without fetching all the messages from the beginning. For example the target message id is 100 then it should only fetch messages 99, 100, 101 instead of fetching all messages from 1->100.
Is there a way or approach to achieve this? Thanks alot!...
checking my understanding: i cannot chain queries without writing them twice for hook and async fn ?
I'd like to be able to define the chain of queries once, and then useFooQuery and fetchFoo both work as intended.
Instead, if I have something rather complicated, I have to do:
```
useDQuery = (x) => {...
Best practice for auditing requests?
Hi all. We have had requested that all API requests to certain endpoints create audit records. This is done for each request. You can see how this might get out of hand with the refetching that is done by default. While that can be configured on a per-query basis, I'm wondering if anyone else has had to support something like this and how you have gone about it.
Thanks....
Retrieving the token from router context into an useGraphQL() wrapper around useQuery()
I tried to write and useQuery() wrapper so I can inject the logged user token.
`import request from "graphql-request";
import { type TypedDocumentNode } from "@graphql-typed-document-node/core";
import { useQuery, type UseQueryResult } from "@tanstack/react-query";...
Best way to handle multiple api endpoint calls for dashboard
I am building a dashboard with multiple components. On load of the dashboard, 13 separate api calls are made fetch the data for the dashboard causing the dashboard to render extremely slowly. Eventually the api calls complete and the dashboard renders. The queries are distributed across the components that need them. I've confirmed that the api endpoints are being hit only once and there are no errors. Any suggestions on how to stagger the api calls would be greatly appreciated.
I posted this question in more detail on SO.
https://stackoverflow.com/questions/77632992/multiple-react-query-api-calls-render-dashboard-ui-extremely-slow...
Custom query hook and type for placeholderData option
Hi! I'm currently trying to migrate from v3 to v5 and have an issue with defining the type for
placeholderData option that I'm using with keepPreviousData helper function.
We've got our own basic UseQueryOption type defined with a few of the common options (e.g. enabled, keepPreviousData) that we use with our custom query hooks. Until now, keepPreviousData was simply a boolean, but now placeholderData is a generic type that depends on the response type.
What's the best way to type it? Right now, most of our custom query hooks are typed as:...Propagate changes when using `queryClient.setQueryData`
I wanted to use react query as the sole state management of the system I'm working on.
for some reason using
queryClient.setQueryData even though it updates the data doesn't send an update to affected hooks.
Here is my workaround but I doesn't feel nice to use. Is it intended behavior ?
...useInfiniteQuery & Types
Hello! I think i'll go crazy since I can't understand how to type this Hook. I've tried to do the same with useQuery which works good but in the in the case of useInfiniteQuery, I can't grasp it. Can someone help? 🙂
import type { InfiniteData, QueryFunctionContext, UseInfiniteQueryOptions, UseInfiniteQueryResult } from "@tanstack/react-query";
import { useInfiniteQuery } from "@tanstack/react-query";
...
Mock mutateAsync in jest
I have this hook that I mock with MSW. The tests for the isolated hook work.
```
export const useEditUserProfile = () => {
return useMutation({...
How to Fetch Specific Data for an ID in Details Component in React using React Router
I have navigated to
And in this component i want the whole object for that id, should i do a function to fetch the data again for that id or can i get the cached value? Since i just get the id from the params.
...
<Link to={`/city/id${city.id}`}> {city.name}</Link>
<Link to={`/city/id${city.id}`}> {city.name}</Link>
Query devtools giving `Uncaught Error: No QueryClient set, use QueryClientProvider to set one`
It's a vite + pnpm SPA running with a cloudflare worker function written in Hono using wrangler local, but the vite server also gives the same error.
versions:
"@tanstack/react-query": "^5.13.4",
"@tanstack/react-query-devtools": "^5.13.4",...
'lastPage' is of type 'unknown'.
How do I sovle this typing? I thought this should be typed automatically?
Thanks in advance....
What is the expected behaviour of `setQueryData(aKey, undefined)` on v5 according to documentation?
Documentation (https://tanstack.com/query/v5/docs/react/reference/QueryClient#queryclientsetquerydata)
If the value is undefined, the query data is not updated.
But in my case the data is set to undefined. Does not follow the doc's description...Realtime fetching in react query.
I know my question is quite silly. We are working on an app where I want my users to see real-time updates whenever someone changes on database. I want every user to see that changes.
I heard about short/ long pooling. I would like to know other possible to achieve this on react query. I know we can achieve through WebSockets...
Offline Cache Not Working with UseSuspenseQuery
Hello!
Im trying to test my apps offline capabilities and I'm having two issues:
1. I have gctime set to a really long time along with the persistor setup (code at the bottom). When I simulate offline mode in the devtools and refresh the page, everything is fine. The app loads the old data and tries to make requests. When the requests fail though, the queries get ejected out of localstorage, and when I refresh for the second time, I get an error thrown
2. I'm using react-query + trpc. For some reason when the queries fail they throw an exception outside of react query. Is this because I'm using suspense queries? I'd like for it to ignore as if its nothing happened if the request fails (assuming there is old data). Here is a sample stack trace...
V5: Using useSuspenseQueries with enabled = false
I've seen some comments here and there about how
enabled is not supported by useSuspenseQuery (though nothing is documented in migration guide). I was wondering how one might migrate from using useQueries with suspense=true, and some queries being conditional to the new useSuspenseQueries.
V4
```...separated function cannot be added as a queryFunction
Hello!
I currently have the problem that my separate function that makes the API call is not declared as queryFunction.
The function:
```...
Help needed in Nextjs API + react-query rejection handling approach
Hello there!
For starters I'm using
nextjs@14.0.3 + react-query v5 and im using the Pages routes not the app folder.
In one page i'm using react-query to fetch some data
...