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
Looking for work as a Frontend developer
As an Angular/Vue.js developer with 6 years' experience, I craft fast web apps using RxJS/NgRx and Composition API/Pinia for state management.
Modern TypeScript/JavaScript drives these implementations, paired with MUI/Tailwind CSS for polished interfaces.
Seamless REST/GraphQL API connections bridge to backends, occasionally enhanced with Node.js/.NET support and SQL/MongoDB databases.
Recent projects incorporate AI tools like OpenAI/ChatGPT for smart features in Angular/Vue environments....
abort async operation of prefetchQuery() on navigation
hello,
im using nuxtjs with tanstack query (nuxt v3 integration) with full client side routing (no ssr).
on page "/a" im prefetching a list of endpoint without await-ing to avoid blocking the rendering. now imagine a use case when user dont wait to the end of prefetching before moving from "/a" to "/a/1" the remaining prefetching will continue or no ? should i abort them manually or the lib already does it...
useQueries: I want to get values and state from a specific query in the array with queryKey
Hi all.
I've been trying to get something running but I've been hitting a wall for some reason...
I have useQueries ( with queryOptions ) and for all the queries I run I have a queryKey built like: ['firstPart', 'secondPart', 'string_var']....
setQueryData doesn't trigger an update
i have a transaction with a note field. everything works fine when i add a note. but when i use a graphql mutation to remove the note with
null
i receive the callback and do a setQueryData but that doesn't re-trigger an update on react side with the note to null i have to pull to refresh.
am i missing something
...Can you please help typing this without breaking the rules of hooks?
How can I type this custom React hook that internally calls useQuery with two different query option functions, so that TypeScript infers the correct return type based on a "type" parameter?
```js
// useDocuments.ts
import { invoiceDocumentsOptions } from "./invoice-documents/invoiceDocumentsOptions";...
Tanstack-query: expo application when we close/kill the app the store should be cleared?
I'm working on a react-native application and one of the issues that we have is for example this hook:
```ts
const {
data: exampleData,...
react-query. How can I manage the isFetching state for the same query when it’s used in multiple com
There is query:
`export const useGetClients = (params?: GetClientsRequest) =>
useQuery({
queryKey: ['clients', 'list', params],...
refetchOnWindowFocus is not behaving as expected
Hello, everyone in one of my pages i need to use this method I understand that it only works if data is stale so i tried to set
staleTime to 0 but after switching tabs data is not refetched, also tried to set refetchOnWindowFocus: 'always' but again not working as expected. Is there a way that i might have dissabled it accidentaly or some other thing i have to consider before using it?Using server actions in mutations
Is it possible to use Next.js server actions as
mutationFn parameter? I didn't mange to get it to workPersist Query Client
I want to how to use Persist Query client as i was getting 500 error when i wrap with persistQuery client
How to handle search with tanstack query?
If you have a form with lets say
search, sort, category etc. What is the best way to trigger a search, which returns results? The search should be triggered by form submission.
Is this the way to go?
```ts
const [form, setForm] = useState({...Double query call using "use"
Hi, this is my first interaction in this server.
I am using the experimental_prefetchInRender feature, and i experimenting double query calls when change the queryKey data using startTransition.
Is this normal?
...
Caching prefetched data in a server component
I have some prefetch queries in some of my Next.js server components. I have done this according to docs in "Advanced server rendering".
```typescript
// Server component
const queryClient = new QueryClient()...
Query without a queryFn but just manually using setQueryData?
I have a weird use case which probably means I'm doing something wrong, haha. I have a case where I'm streaming some events back from a server using Server Sent Events. There's some events I'd like to store in memory and make use of their results later. Since I already use TanStack Query, I thought I'd just leverage that. But basically I just want to manually manage the query data myself.
I have this:
```
queryClient.setQueryDefaults(...
Minimizing QueryKey Size with Dependent Queries
Hello,
I have a dependent query that relies on another query, so the eslint exhaustive-deps rule tells me to add that result to my new query's key. However, that is a very large array of objects when serialized, so my queryKey is gigantic, and really makes the DevTools hard to work with.
Can I instead just use the query.lastUpdated property? That seems to update and invalidate my dependent query whenever the primary query changes (though I understand it happens even if the data hasn't changed, that's OK in this scenario)...
Streaming with server components
Context:
- I am using the
queryClient.prefetchQuery() method from the advanced-ssr.md guide explained here.
- I don't await the prefetch
- I use the shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) ||.state.status === 'pending' setup, so streaming is "enabled".
- I use useSuspenseQuery inside my component...useQueries slowing down the app (freezing for several seconds)
We recently started to use useQueries extensively when querying our entities throughout our apps. We use granular query for each entity and combine them using a list of ids and building each granular queries into useQueries to get the entire list of entities. As opposed to before where we had an endpoint returning all entities. our queries (eg: useUnits) are therefore spawining useQueries with hundred of queries attached in many components. This led to explosion of our performances.
Note that there are almost no re-render so its not the issue, the issue is likely internal and an overhead of maybe overusing useQueries. When we log the queryCache events, there are millions of logs happening
Here is an example of a hook that is being used in many places...
Using setQueryData inside a Mutation/QueryCache
So I am in a situation where the API, often throws MFArequired error, so i felt it is not intuitive to constantly throw a callback (onError) in a useMutation to load a state to open a modal.
So I saw on the docs we can use Mutation/QueryCache to catch the response. So I am wondering if i will run into any issues and if there is a better way to do this.
TLDR:
Can i use
setQueryData inside QueryClient ?...Offline persistent mechanism for the error state
I am using TanStack in a React Native environment and trying to provide a smooth offline/low connection experience for users.
I use PersistQueryClientProvider with AsyncStorage, and offline mode generally works well. However, I expected mutations to persist during error retries, even if a mutation fails mid-process. This is important for users with low connectivity—we don’t want to lose their data if a mutation fails and the user closes the app.
The use case that I am trying to solve is:
If a user with a poor internet connection triggers a mutation, the request might take too long and eventually throw a timeout error. The system will retry the mutation several times based on the query client configuration. However, if the user closes the app during these retries, the mutation is lost—whereas the expectation is that the mutation operation would resume once the app is reopened....
Removed data with AsyncStoragePersister + PersistQueryClientProvider
We are currently facing a strange behaviour of React Query used in React Native. More often it happens on Android phones.
For authentication we are using /refresh endpoint which consumes a refresh token and return a new access + refresh token pair. The TTL of the refresh token is 20 days, access token 15 mins. The refreshing works fine for a few hours, but usually after more than 12 hours (over night) the cache seems empty as the request is being sent withou the refresh token, fails, and the user needs to re-login.
Looks like the garbage collection kicks in or something. The docs say
IMPORTANT - for persist to work properly, you probably want to pass QueryClient a gcTime value to override the default during hydration (as shown above)....