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

exotic-emerald

6/25/2025

setQueryData & nested arrays immutability

I am experiencing an issue with useMemo in my react app. Basically, it's NOT getting triggered when its dependency is updated. Simplified code example: ```...

protestant-coral

6/25/2025

useQueries with retries and redirects end up using the same redirect for all Queries

When running code like this ``` const ids = [1, 2, 3] const combinedQueries = useQueries({ queries: ids.map((id) => ({...

rival-black

6/25/2025

Invalidate React Query on SSR Next JS (App Router)

I am using SSR React Query by following this guide - https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr I have a API that fetches me list of products. I am using SSR react query to cache the response ...

ambitious-aqua

6/24/2025

Query/Mutations as nested record

Hello, I'm trying to do something with my queries/mutation to describe my endpoints as a queries/mutations in a recursive record to use (and mostly reuse) in my code. My problem stems from the portability error on typescript (also I don't think I have used the right types but this works well enough for now). I can't dumb down the types & remove genericity as it's key for the types to work well inside of useQuery & others. ``` The inferred type of 'teacherSessionAPI' cannot be named without a reference to '.pnpm/@tanstack+query-core@5.80.7/node_modules/@tanstack/query-core/build/legacy/hydration-Cr-4Kky1'. This is likely not portable. A type annotation is necessary.ts(2742)...

absent-sapphire

6/23/2025

Using useQuery result in custom hook

Hi, I'm having trouble using the result of a query in a custom hook, as the hook runs before the promise is resolved, resulting in passing it an undefined object. My query looks something like this: ```typescript const {data: formResponse, isLoading} = useQuery<DynamicForm>({...

graceful-blue

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

passive-yellow

6/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 ?

conscious-sapphire

6/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?

xenophobic-harlequin

6/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' },...

exotic-emerald

6/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 () => {...

foreign-sapphire

6/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?

stormy-gold

6/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:...

rising-crimson

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

sensitive-blue

6/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

complex-teal

6/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"; ...

passive-yellow

6/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: {...

rival-black

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

fascinating-indigo

5/30/2025

Typescript DX assistance "request"?

Hey guys, I'm relatively new to this library. While I find it's mental model exciting, and I really like inferred types, I feel like core Typescript DX is really strange I know that rules recommend don't insert much screenshorts, but I promise, they're not context-overwhelming Here's what I mean by TS DX: ...

absent-sapphire

3/19/2025

Using useSuspenseQuery for paginated requests

Am I understanding correctly that useSuspenseQuery is not the preferred way to render paginated data because, when changing pages, it is harder to show a loading state due to the existing data from the previous page? Or am I missing something? I am changing pages through React Router search params from another component. Currently, page changes work, but there is no indication of a loading state as there is with the initial useSuspenseQuery fetching....

stormy-gold

3/9/2025

Non-undefined placeholderData types as possibly undefined

If my placeholderData function always returns a proper result (not undefined), then why is the resulting data property typed as T | undefined? Consider the following example: ```typescript...

Previous Next

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