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

variable-lime

5/16/2025

Mutation not changing `isPending` back

We got this query hook: ```tsx function useDeleteProjectStageTemplate({ editMode, removeStageTemplate,...

optimistic-gold

5/15/2025

basepath issue

I am trying to deploy to github pages which introduces a mandatory repo name base path in the url. So to account for this i am setting basepath in in createRouter options and also base: in my vite.config.js. the issue im getting is that when i do this, i get a spam of errors, suggesting the app is trying to call react createRoot twice, and the entire app gets duplicated again below (as in, not rerendered twice, but i can actually see two of everything). If i remove the base path properties, then this issue stops happening. any idea how to fix?...

flat-fuchsia

5/15/2025

Automatic Query Invalidation

Hi guys, I have read Automatic Query Invalidation after Mutations, and I pretty like meta option approach, but in some case I need to access to the payload I pass to the mutation to invalidate a specific queryKey. How can I combine it with the meta option approach?

equal-jade

5/15/2025

Double toasts on error

so when the getAcedmic years throw an error am getting two taosts same message, even after disabling retries ```tsx const { isPending, isError, data, error } = useQuery({ queryKey: ["academic-years"], queryFn: getAcademicYears,...

conscious-sapphire

5/14/2025

Suspense, HydrationBoundary and Streaming - Examples from Docs

has anyone had much success using the streaming pattern here? https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components - if I add a delay(3000) to the function that is the queryFn I was expecting some sort of suspense to kick in, but instead it just waits the whole 3 seconds before doing anything. I've updated the dehydrated parts of the queryClient options as per the docs if I take https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching and add the same delay into the fetching of the pokemon info, it still takes the whole delay to show anything to the FE ...

flat-fuchsia

5/13/2025

mutationOptions with queryClient variables type inferrence

i made a wrapper function for mutations that lets you create mutationOptions with queryClient in it that you can use for optimistic queries and invalidation, etc... For some reason it can't infer the variables properly in onMutate, while when i make a wrapper without the queryClient it can: ```ts import type { DefaultError, QueryClient, UseMutationOptions } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";...

fascinating-indigo

5/12/2025

Client invalidateQueries not triggering refetch for server-side prefetched data

I'm using Next.js 15 with tRPC v11 and TanStack Query. On the server side, I fetch and filter the user list based on query parameters. Here's how the data is prefetched using getQueryClient and hydrated with HydrateClient: ```ts import { getQueryClient, HydrateClient, trpc } from '@/trpc/server';...

extended-salmon

5/12/2025

isFetching, isLoading, isPending, isError... how to best structure component? (esp. w/ TS)

There are a lot of convenience booleans (isFetching, isLoading, isPending) returned from useQuery() which signal the state of status. I'm a bit confused which ones to use especially in TS where I want data to be defined (and not <data> | undefined) and handle all states around the async request ("loading", "error", "date"). This is the pattern that makes most sense to me: ``` function MyComponent() {...

dependent-tan

5/11/2025

No QueryClient set, use QueryClientProvider to set one

I'm trying to use useQuery/useSuspenseQuery with a tanstack start application, but I'm getting this error always ''' route.tsx:40 Error: No QueryClient set, use QueryClientProvider to set one The above error occurred in the <RouteComponent> component....

correct-apricot

5/9/2025

Keeping data up-to-date with cross user shared data

Consider a scenario where data on a page is shared between multiple users (say User A and User B). Assuming a stale time of 5 minutes for the query to fetch that data. If User B has updated the data and User A tries to access the data before the stale time expires, User A will see outdated data. Is there a way to handle this situation while still having the cache included? ...

fascinating-indigo

5/9/2025

Optimistic Update not working on another route.

On /vote/$senatorId I have a mutation ```ts const { mutateAsync } = useMutation( trpc.vote.addVote.mutationOptions({ onMutate: async ({ sway }) => {...

xenial-black

5/9/2025

How to access individual customer by ID after a search with TanStack Query?

Hi, working on a React Native app with Expo Router + TanStack Query and could use some advice on caching patterns. what i have: ```ts const searchCustomersQueryOptions = (search: string) =>...

optimistic-gold

5/8/2025

Refetch on changing persister buster

I am using a local storage persister with a maxage and a buster. When the data is initially fetched, it goes into the persister and reloading the page retrieves it from storage fine. The issue is when the persister buster is changed (e.g. version change), it resets the local storage data to empty, but useQuery just happily reads out this empty data, instead of detecting that its been cleared and refetching from fresh. I'm assuming the same thing will happen when the persister reaches maxAge as well. How can i make the query refetch when the persister storage is expired?...

eastern-cyan

5/7/2025

Disable Optimistic Update

Is there anyway for useQuery, useSuspenseQuery I can disable optimistic updates? For example, let’s say I have 5 table rows at the route A with fetching RQ. Then I move to route B and suddenly rows data increased to 8 on DB. When I move back to route A again, RQ will first show the stale data which is 5 rows and refetching on the background and once new data comes, shows up new data which is 8 rows in smooth way. Seems UX designer doesn’t want this and just want to show loading for prevent layou...

passive-yellow

5/7/2025

Prefetching previous pageParams for a useInfiniteQuery?

Lets say i have 2 previous cursors in cache (from a regular query) that I want to use on an useInfiniteQuery - how would I do this? Basically the useInfiniteQuery hook will fetch the current token, but it wont have the previous cursors and data in cache yet, I simply want to supply the previous tokens so it can populate pageParams and data from the fetch.

conscious-sapphire

5/7/2025

Invalid Node AST error tanstack query with graphql codegen

https://stackoverflow.com/questions/78925598/error-invalid-ast-node-when-calling-api-using-graphql-graphql-request https://github.com/dotansimha/graphql-code-generator/issues/9553 not sure if i should ask here but im receiving this error on tanstack start, while using tanstack query with graphql with codegen. receiving the same error as on the stackoverflow question linked above....

like-gold

5/7/2025

Next.js useSuspenseQuery error

I am using Next.js app router. And use useSuspenseQuery In the queryFn I called server actiono directly (exported function from "use server"), but that throws an error saying...

correct-apricot

5/6/2025

useQueries combine - combining query results

Hi all. Not sure if I'm missing something in the docs, so I wanted to ask here if anybody has done what I'm trying to achieve with useQueries. I fire 2 queries in the useQueries and I would like to combine the results from the 1st one with the results with the 2nd one ( merging 2 api calls into one object )....

harsh-harlequin

5/5/2025

setDefaultOptions -> refetchQueries race condition?

I'm trying to set a global meta option that my queryFns will recognize and do a fetch(..., {cache: "reload"}) HTTP request. I came up with this: ```typescript...

fair-rose

5/3/2025

How to silence missing queryFn warnings?

I have a project which uses react-query as a generic store (ala zustand). State is set via setQueryData() or <HydrationBoundary>, and consumed with useQuery as normal. staleTime is set to Infinity so no data fetching occurs. My understanding is that this is a common use case for react-query. However after a recent update https://github.com/TanStack/query/pull/8701 I get tons of warnings about missing queryFn. Is there a way to silence the warnings?...

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