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

rival-black

5/2/2025

Cached & persisted queries (react native)

I'm using react-query w/ async-storage, the cache persists and everything is working correctly except that on failed "refetch(es)" the data in cache seems to get deleted/swapped, here's what I tried to keep the cache even on failures: Failed attempts 1: ```ts...

xenial-black

5/2/2025

Suggested pattern for optional props that are required in api request?

I constantly find myself doing this: ``` // fooId is an optional prop to this component ...

extended-salmon

5/2/2025

Tanstack Query in separate packages

Hey crew, I've got a project where we have the main repo, and then we have a separate repo that we use for some "common" components to reuse, and we import that as a package into our main repo. Would I be able to use tanstack query hooks in the common components, and then have them work and tie into the query client properly when imported and used into the main repo? Thank you!

inland-turquoise

5/2/2025

Cached local storage query persist

I am fetching relatively static data from an API that i dont want to spam but may update occasionally. i never watch to refetch within a particular session and i only want to fetch upon page load, but also not more often than X hours. if i just visit the page for the first time, it should fetch. but then if i refresh the page a minute later, it should not refetch and just load from cache instead. if i wait say 12 hours and refresh, then it should fetch again and update the local storage. I have the following basic code and the above functionality is not working. The issue is that it refetches upon page load every time. ...

other-emerald

5/2/2025

Server-side prefetching with TanStack Query in Next.js (App Router)

Hi all! I'm using Next.js App Router and integrating TanStack Query. I’ve set up server-side data fetching using prefetchQuery in server components and then hydrating the data into client components using <HydrationBoundary> and dehydrate. This works fine — my client component receives the data and doesn't re-fetch unnecessarily. However, I’ve noticed something that I want to confirm: When I navigate between pages (using <Link> in a shared layout header), the server component runs again, which triggers the prefetchQuery on the server. So, a GRPC network call is made even though the data is already in the cache on the client....

national-gold

5/2/2025

How do you stop this behavior?

I have a mutation that looks like this. ```ts const { mutateAsync } = useMutation( trpc.vote.addVote.mutationOptions({ onMutate: async ({ sway }) => {...

funny-blue

5/1/2025

Error in development but not in production using Next.js 15

When I trigger the onChange in the select it gives this error:

Cannot update a component (`Router`) while rendering a different component (`ClientComponent`). To locate the bad setState() call inside ``ClientComponent`, follow the stack trace as described in https://react.dev/link/setstate-in-render

Cannot update a component (`Router`) while rendering a different component (`ClientComponent`). To locate the bad setState() call inside ``ClientComponent`, follow the stack trace as described in https://react.dev/link/setstate-in-render

...

generous-apricot

5/1/2025

SWR pattern within one query

I have two data sources for the same query/API endpoint. One cached, potentially stale but very quick to access, and another one, remote and fresh, etc. The idea is I would be OK with stale data but would refresh it in the background from the fresh data source. I wouldn't need to show a loading state as long as there's stale data around. The behavior I'd want on an empty QueryClient store: 1. Load from the fast data store 2. Render with it (contentful)...

quickest-silver

5/1/2025

General React-Query Patterns

Hi all, I'm pretty new to React and I've just started learning about React Query but I'm a bit confused on general patterns and how to implement it alongside other core react hooks. Is there any go to guide/source any of you have found extremely helpful? I'm currently going through the docs whilst trying to hack together a remake of a simple project just so I can get a feel for things. At the moment I feel like I'm just hacking things together without much structure but there's so many ways to achieve the same outcome. Is React query a complete replacement for UseReducer + Context combo?...

fascinating-indigo

4/30/2025

useQuery select

Hi all. Not sure about if I understand the select correctly ( now ). But am I false to assume that the select is used for data transformation to be directly returned from the query and the modified data is not persisted in cache? I just noticed since I'm using getQueryData and I was surprised when I was missing a part of the modified data 😉...

foreign-sapphire

4/30/2025

Is react-query v3 still supported?

Unfotunately I'm working on a project which is still using react-router v3. Is there a document mentioning if v3 is still supported or when it is going to EOL?

fair-rose

4/29/2025

Skipping queries with top-level skipToken

Is there a reason for not supporting a top-level skipToken? I.e. useQuery(skipToken). This would improve ergonomics when working with the queryOptions API. E.g. I'm currently facing this: ```tsx const customerQuery = useQuery(customer ? getCustomerQueryOptions({ id: customer.id }) : skipToken);...

unwilling-turquoise

4/28/2025

Loading pattern I want for my useQuery hook

The goal is: as long as the query is observed by any subscribers, I don't want it to be refetched ever (no refetch onMount, onFocus, onReconnect, nothing). As soon as the query isn't observed anymore, I want to either become stale (or removed from the queryCache) so that the next time it gets observed, it refetches again. Would this be enough to do it? ```...

genetic-orange

4/28/2025

Conditional queryOptions

Hi, does anyone know why typescript is failing at this?

const { data: departmentsData } = useQuery(someCondition ? departmentsFactory.innovationManagerList() : departmentsFactory.departmentLeaderList())

const { data: departmentsData } = useQuery(someCondition ? departmentsFactory.innovationManagerList() : departmentsFactory.departmentLeaderList())

When I remove the someCondition and only use either one it works, but once it is a conditional it breaks. Any workaround?...

foreign-sapphire

4/26/2025

Type error when using `keepPreviousData()` with `useInfiniteQuery`

When setting up an infinite query that looks something like: ```ts useInfiniteQuery({ queryKey: ['...'],...

ambitious-aqua

4/26/2025

synchronous state with query? is this ok?

i've typically heard react query referred to as an async state manager, in addition to server state my questin is, is there anything inherently wrong with using it for synchronous state, for the sake of keeping the code style/toolchain consistent? i have a one big piece of data that my whole application needs access to, and i need to initialize it when its provider mounts. previously i was just useEffect(() => ..., []) and setting the value with useState in there...

magic-amber

4/26/2025

laggy UI when using optimistic update

Hi guys, I'm using the optimistic update technique. But sometimes, the ui is updating slowly. I'm not sure where I was wrong. Please take a look at my video and my custom mutation. Can anyone help me?

harsh-harlequin

4/25/2025

should I use useRef when using tanstack query in my stack layout file?

windsurf suggested that I do this instead, is this correct? its my first app so sorry for the noob question...

wise-white

4/24/2025

I have observed that my refetchInterval is not working on a component page but works on my hooks.

``` export function useGetAllTicketsTodayQueryOptions(userId: string | undefined) { return queryOptions({ queryKey: ["list-of-tickets-today"], queryFn: () => getAllTodayTickets(),...

fascinating-indigo

4/22/2025

streamedQuery

Hi all. I've found the streamedQuery helper in the docs but I was wondering from where does the import come from? https://tanstack.com/query/latest/docs/reference/streamedQuery#streamedquery...

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