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

2/26/2025

Best way to "trigger" mutation on Page Load?

I have a 1 SPA page orderform. 1) User navigates with some query parameters (IDs) 2) As soon as page loads I need to raise a POST request to create the initial order draft. ...

quickest-silver

2/26/2025

Missing context type in mutation callbacks

I would like to invalidate a query in onSuccess, and the docs claim the third argument is a context, but actually it doesn't exist (see screenshot). How do I really get access to the query client to do invalidation in this onSuccess?...

rare-sapphire

2/24/2025

SSR with HydrationBoundary doesn't work, client fetches the data

What I expect: /feedback page loads with prefetched data on the server, meaning the data is in the page source code and there is no additional network request to /api/feedback on the client. I am importing this into the page and wrapping the page with it. ```typescript const PrefetchBoundary = async ({ children }: { children: React.ReactNode }) => {...

automatic-azure

2/24/2025

Tanstack Query + Next.js router intergration.

Hello! This might be a silly question, but I'm having a hard time figuring this out with router integration. I’d like to invalidate or remove queries during route navigation while preserving the cache for browser history-back navigation (e.g., for scroll restoration). Of course, I could achieve this by prefetching and invalidating queries in every event handler (onClick={() => invalidate/remove}), but I'm looking for a more elegant and cleaner approach using router loaders....

adverse-sapphire

2/23/2025

Setting up new TanStack React Query with Server Components and Fetch Adapter

I'm following the documentation for creating a tRPC caller for server components here https://trpc.io/docs/client/tanstack-react-query/server-components#5-create-a-trpc-caller-for-server-components I'm using NextJS app router and the Fetch adapter with my context. When I try and configure the createTRPCOptionsProxy I pass my createContext function I get the following error:...

flat-fuchsia

2/23/2025

Infinite query fetches next page on every rerender. Why?

I toggle a setting showOwnOnly which triggers a rerender. On that rerender, I can see, that the infiniste query i am using fetches the next page. The queryKey is stable (otherwise it probably would start at page 0 again). Here is how I use the query: ...

gradual-turquoise

2/21/2025

how to "pause" queries globally?

I am currently using nextjs page router with react and I am looking for a way to pause all queries on the current page. Below is the use case: 1) I have 10+ queries on the page that is dependent on a location_id param as the query key 2) A user can switch user by clicking on a button on the page which triggers a mutation POST call that updates the location_id in the database and then routes the user to a different page after the mutation completes. ...

adverse-sapphire

2/19/2025

Query cache failing on client-component pre-rendered on server

I'm using react query with nextjs 14. I am prefetching a query server side and using <HydrationBoundary state> to hydrate that queryResult to the client. This is working correctly. The problem is: The client component where I need the query result, is pre-rendered on the server. When this happens, the useQuery() doesn't have the cache hydrated because its not yet on the client, so it returns null. and then on the client the cache is retrieved correctly, which causes a hydration failed due to UI mismatch....

extended-salmon

2/19/2025

Garbage collection for queries with searches

Assuming i have a query that accepts a search parameter, if a user searches, every inactive query will be cached and then only be cleared after 5 minutes. If a user keeps searching it'll add a lot of entries into the cache as they will all have a different query key, is this less of an issue than i think it is? I'm mostly just worried users will run out of memory if they overdo searching...

optimistic-gold

2/18/2025

Using Next js and GRPC

I'm interning at a friend's startup building a SaaS for textile companies. The backend is in Go with gRPC, and I’m handling the frontend. While Angular is the proposed framework, I'm more comfortable with Next.js, which offers easy server-side rendering and data prefetching—crucial for our data-heavy tables and pagination. I’m exploring options like React Query or tRPC for managing data fetching, but I need to integrate them with gRPC without adding unnecessary complexity. What’s the best approach to efficiently prefetch data, handle pagination, and communicate with gRPC in this context? Anyone worked in a similiar codebase?...

mere-teal

2/18/2025

setQueryData inside mutation behavior

I copied following example from the course: ``` function useUpdateUser() { const queryClient = useQueryClient()...

fascinating-indigo

2/18/2025

How to annotate function, which returns queryOptions object.

Hello everyone, I have @typescript-eslint/explicit-module-boundary-types function enabled on my project. I want to create something like this: ```...

helpful-purple

2/18/2025

Why doesn't the Suspense fallback trigger in the Suspense example?

In this example from the docs, why wouldn't I ever see the fallback <h1>Loading projects...</h1>? https://tanstack.com/query/latest/docs/framework/react/examples/suspense...

ratty-blush

2/17/2025

useQuery optional arguments?

Hello folks, I can't find any information about how custom hook with useQuery handles optional arguments when sometimes like example i want to use useUsers() but also implementation like useUsers({params={id:100}, default: false}) would also work. So im wondering if i dont pass any args cache would work fine if default fallback value would be empty object {} or will it be unique cache every time cuz object would reference to new instance everytime hook is called. What would be best solution for this?...

mere-teal

2/17/2025

useMutation onError never triggered?

I am experiencing an issue with useMutation in my custom hook. The onError logic is never getting triggered, the onSuccess is. The hook (throws on error 1/3, random): ``` import { useMutation } from '@tanstack/react-query'; ...

harsh-harlequin

2/15/2025

React Query hangs on NextJS 14 when navigating away from a page. Im not doing any custom prefetching

I have 6 infinite queries on a page, they are not prefetching, they are all using 'use client' however after the first 2 complete, when I navigate away the devtools say the query is disabled, then when I navigate back it says fetching, but no network call is ever made, and I get a consistent loadingState. I've just updated to the latest version of React query.

ambitious-aqua

2/12/2025

Error: No QueryClient set in Next.js App Router despite following Advanced SSR guide.

I'm trying to set up React Query in Next.js app router in my NPM workspace. I'm following the official documentation on how to do so. Providers Setup ```tsx // apps/template-1/app/providers.tsx...

deep-jade

2/12/2025

useQuery with server function?

Hello - I ran into something I didn't know how to handle. I am trying to make a query - but I am passing the db in the query options. However, this gets ran in the client so - pg can't be called there. What is the proper way to handle this in Tanstack Start with useQuery or queryClient perhaps? `// some file import { db } from "~/server/db"; ...

stormy-gold

2/12/2025

react queyr with maxPages and virtualized list

i am building a virtualized list using tanstack query's infinite scroll with maxPages of, for example, 3 using virtuoso for this, scrolling works fine for fetching UNTIL we get to 3 pages, say we have [a,b,c], when we fetch the new one, the array becomes [b,c,d], so when the new page loads, virtuoso places me at the end of d which causes another refetch because we are at the bottom of the list...

like-gold

2/11/2025

help with understanding useSuspenseQuery

hey guys, I wanted to ask for help to understand the hook. When used with trpc in a next app router app, It’s suggested that we prefetch on the server and use useSuspenseQuery in client but Ive noticed that the hook works even without prefetching, is something I am missing or? Also if we use both prefetch and useSuspenseQuery and the query needs params, do we send them both in server component and the client too? feels like a duplicate job to do....

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