TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

dependent-tan

10/10/2025

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? ...

afraid-scarlet

10/10/2025

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()...

adverse-sapphire

10/9/2025

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(...

afraid-scarlet

10/8/2025

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)...

adverse-sapphire

10/8/2025

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...

solid-orange

10/8/2025

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...

exotic-emerald

10/7/2025

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 ?...

ratty-blush

10/6/2025

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....

stormy-gold

10/5/2025

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)....

xenial-black

10/4/2025

Preventing specific useSuspenseQuery hooks from running in SSR

This may have been asked before, but I'm juggling these things together: - Code with useSuspenseQuery tends to be more maintainable and correct than useQuery. Thinking in Suspense and ErrorBoundary seems to scale well automatically. - We want to migrate all data fetching to suspense - We have SSR - Some queries weren't build with the expectation of running on the server. They depend on client-only state....

xenial-black

9/30/2025

router.tsx for Convex + Start RC

I wonder if it is correct to nest <ConvexAuthProvider> as a child of <QueryClientProvider>. Is it redundant? deps: ```json "@convex-dev/auth": "^0.0.90",...

router.tsx

rare-sapphire

9/30/2025

Worrying about optimistic Update performance in UseInfiniteQuery

hey guys so my worry is basically the title, im using an InifiniteQuery that will fetch posts from the backend database using Pagination! Now the infinitequery handles all in 1 now what i mean by that is it takes into account 1) keyword filtering 2) sorting + score filtering ...

stormy-gold

9/30/2025

How can I tell if my query cache is being used successfully?

How can I tell if my query cache is being used successfully? If I set a staleTime of 60 minutes I still see it taking 110ms to complete if I navigate to another page/route and then come back (or just refresh the page). Is it only saving me if my javascript on the same page was going to request again on some timer or does it save me on page loads like this? ```js...

xenial-black

9/23/2025

invalidateQueries does not work as expected

I have three different use cases of invalidateQueries, add user, ban/unban user and delete user, when I perform one of those actions it does not trigger a re-render, until I use removeQueries + refetchQueries for it to work ```ts const createUserForm = useAppForm({ defaultValues: { email: '',...

exotic-emerald

9/22/2025

Caching for fetching multiple ids in different batches

Hi, I would like to know if something like this is already build-in or doable wihout building a new feature. Context:...

quickest-silver

9/22/2025

"No QueryClient set" after react-query update to 5.85.6.

Hey 👋🏽 today I updated my react-query dependency in a react app from 5.85.5 to 5.90.1, which uses tanstack/react-router. Suddenly I get "No QueryClient set, use QueryClientProvider to set one errors, but only in production (what bit me 😅 ). I also noticed that the bundle size has been increased by 10 kb (unzipped). ...

continuing-cyan

9/22/2025

context.client undefined in react query V5

The docs indicate that the onMutate option in the useMutation hook should be a context item that contains the query client. That would then allow us to use something like context.client.setQueryDate without calling queryClient = useQueryClient(). ```jsx onMutate: async (updatedFailureMode) => { await queryClient.cancelQueries({...

sensitive-blue

9/20/2025

Docs: Optimistic Updates issue

Hi everyone! I have an issue with optimistic docs example. In docs it says the following:

To do this, useMutation's onMutate handler option allows you to return a value that will later be passed to both onError and onSettled handlers as the last argument. In most cases, it is most useful to pass a rollback function.

To do this, useMutation's onMutate handler option allows you to return a value that will later be passed to both onError and onSettled handlers as the last argument. In most cases, it is most useful to pass a rollback function.

...

fascinating-indigo

9/20/2025

When to use a utility and when to use a custom hook with select?

I want to know what the best practice is for filtering data. I have a main hook that reaches an endpoint. And every time I need to process specific data, I create a new hook and use the main one, passing it a utility as a parameter. The problem is that the hooks are piling up... And I often end up using them in only one place in my application. Therefore, I'm not sure when I should create a new hook to handle data filtering and when I should use the base hook and pass it a utility to filter from...

fascinating-indigo

9/20/2025

Best way to handle errors with multiple components sharing queries

I have encountered a use case and would like to know the best practice for handling it. I have three components that use the same hook, retrieving “requests.” In case of failure, I want to display an ErrorRequest.tsx component, which may be the same or different in each component, that doesn't matter. The problem is that if I check the “isError” state in each component, I will end up displaying the ErrorRequest.tsx component three times when there is an error, which would be strange for the user. Also, if I want to pass the refetch function, the buttons in ErrorRequest.tsx will not be synchronized because they do not share state. I discussed this with Claude, and he said that the only solution would be for a single component to request isError and return ErrorRequest.tsx, and for the other two to return an empty fragment. But I don't think that solution is scalable. Another option would be an ErrorBoundary, but I have other components that use other hooks on the page, and it would be bad for the user if, because one endpoint has an error, they couldn't see other components that don't have it....

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs