TanStack

T

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

quickest-silver
quickest-silver6/23/2025

useMutation in Context+Provider infinite calls

Hi all, thanks in advance for your time. I'm using react-router & tanstack query. I need a POST to get fired off upon App initialisation and I figured I could do that using a createContext and provider to then be able to access it a bit deeper down easily, that'd be useful. I am completely unable to get this to work or understand why I am getting infinite re-renders. I have tried everything chat gippity is suggesting and have googled as much as possible....
national-gold
national-gold6/22/2025

useMutation refreshing problem

Hello, is it normal that when using useMutation function and calling .mutate() the page reloads ? like it refreshes not re-render, and if so how do I fix it ?
adverse-sapphire
adverse-sapphire6/21/2025

Is select callback only meant for data transformation?

I’m running into interesting side effects ( bad state updates ) when updating global stores within the select callback. Is it mostly meant to transform data?
stormy-gold
stormy-gold6/19/2025

What causes `queryClient.invalidateQueries()` to error when all requests are good?

I wanted to add a toast-notification when doing a forced invalidation of the full cache and used this code: ```ts void notify.promise( queryClient.invalidateQueries( { refetchType: 'all' },...
fair-rose
fair-rose6/18/2025

Is it possible to wait for a few seconds before invalidates the cache in onSuccess?

I have tried this, but it does not work as I expect ```ts useMutation({ mutationFn: fetchData, onSuccess: async () => {...
ratty-blush
ratty-blush6/17/2025

Can `useQuery`'s result type figure out that all errors throw?

It's wonderful that the typings can reassure me that if status is neither pending nor error, I can rely on data being defined. It seems that it would be even better if they could somehow realize that because throwOnError is set, one only needs to eliminate pending in order to guarantee this state of affairs. Is this a deliberate design decision, am I doing things wrongly, or is it some sort of inherent TypeScript limitation?
modern-teal
modern-teal6/15/2025

TypeError: Cannot read properties of undefined (reading 'fetchStatus')

When i render react query dev-tools ```tsx const ReactQueryDevtoolsProduction = lazy(() => import('@tanstack/react-query-devtools').then((res) => ({ default: res.ReactQueryDevtools })), )...
old-apricot
old-apricot6/13/2025

Quick question about key equality and using it with gql

This might be obvious based on the docs:
As long as the query key is serializable using JSON.stringify
Does this mean they are checked via the JSON serialised version for equality? So if I did:...
other-emerald
other-emerald6/13/2025

with nextjs what is the best way to architect your queries?

i have a nextjs front end with a nestjs backend with microservices. when deployed i realized that there are a myriad of apicalls that are just jhappening because htey either exist, or because the query keeps rendering on the timer. i understand i am still weak in my query approach, especially for an app that needs details on the front end. but at least how do i handle the querying properly when i am creating and updating information?...
fascinating-indigo
fascinating-indigo6/12/2025

SSE background Fetching while component unmount

So I am using react query to receiving streaming SSE api. The problem is this stream should not be canceled or stoped until a manual stop button is clicked. How can I make fetch SSE and complete it even though the component is unmounted? React query’s default behavior is canceling the quey if component is unmountrd. For the stop button, I am using query’s signal, but this makes react query to stop the streaming when component unmounted
modern-teal
modern-teal6/12/2025

Weird type bug when using `queryOptions` with `useQueries`

If you have a type where the only required key is name, the types of results in the combine function seems to be wrong. Any ideas on why this is? ```ts import { queryOptions, useQueries } from "@tanstack/react-query"; ...
flat-fuchsia
flat-fuchsia6/11/2025

default mutation onError fallback?

I would like to create a global useMutation error fallback, where it runs only if the specific mutation doesn't have its own onError handler, or if that error throws. I have set defaultOptions in QueryClient as so: ```ts const queryClient = new QueryClient({ defaultOptions: { mutations: {...
fascinating-indigo
fascinating-indigo6/8/2025

Reset Mutation State in onError Handler of MutationCache

Hello, guys! It’s possible to reset the mutation state inside the global onError handler for MutationCache? I want to catch an AuthExpiredError from my API (when the user’s session has expired), in order to reset the state of all active queries and mutations, and then show a login modal. Something like this:...
genetic-orange
genetic-orange6/6/2025

Experimental streaming without prefetching in Next.js

I am using @tanstack/react-query-next-experimental and I understand that a new QueryClient is created for each server request. However, on a single frontend route, I have both the layout and the page, which are server-side, and they make the same request to the backend. Is there any alternative where I can cache these requests within the same frontend route?...
No description
rare-sapphire
rare-sapphire6/5/2025

useInfiniteQuery blocks useQuery in modal

I have an infinite table using useInfiniteQuery. You can click each row to open a modal, which contains a useQuery to load additional data. My issue is that after initial load, it'll start loading the first next page, and while doing so, all useQuery calls in the modals are blocked. Upon completion, the modal loads immediately. Also, this doesn't seem to happen for subsequent next page loads. Does anyone know what might be going on? Am I not supposed to be calling useQuery from modals in...
generous-apricot
generous-apricot6/5/2025

How to type select fn

I have next code: ```tsx export function useTimezones(select?: <T>(data: Timezone[]) => T) { return useQuery({...
No description
fascinating-indigo
fascinating-indigo6/4/2025

OnSettled return void change in recent update causes error, how to solve?

We used to return a context on the onSettled to reset it to null (see screenshot) after the onSettled return type change to void | Promise<void>it started to throw an error. How can we achieve the same result now?
No description
graceful-beige
graceful-beige6/3/2025

I want to use use, and use query mutate

I want to use use, fetch or start the on the server component and pass it to a client component and receive it with use but then when I mutate the data, in my mind there would be no key to invalidate but because use is handling the promise on the server? What would be a good pattern to be able to use mutate and use to start fetching the data right away? Or would doing this totally break the idea?...
helpful-purple
helpful-purple6/2/2025

queryDefaults typing

Hello, Wanted to know if it is a common way to create queryDefaults and mutationDefaults ? I'm trying to centralize all my request in a folder, and then I have a object containing all my queryKeys to easily call a query or mutation somewhere on my app. ...