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

harsh-harlequin

1/21/2025

Check if queries with common query key are fetching

Hi all! I have a paginated query, similiar as described here in the docs https://tanstack.com/query/v5/docs/framework/react/guides/paginated-queries. In my case I also have an order criteria in my queryKey (queryKey: ['projects', orderBy, page]). Is there any way to check and re-render if at least one query for a specific page is currently fetching? Like is "projects ordered by date" currenty (re-)fetching, no matter which page? Somehow similiar to useMutationState, but for queries?...

automatic-azure

1/21/2025

How to show a loading while getting async storage data

Hi! I want to show a spinner while the app is getting the data from the async storage (Indexed DB) is that possible? Otherwise i get an empty screen while async storage data is loading ```tsx import { ReactNode } from 'react' ...

absent-sapphire

1/21/2025

Suspense fallback not showing on React Native (Expo) with useSuspenseQuery

I've referred to the example of Suspense in https://tanstack.com/query/v5/docs/framework/react/guides/suspense, but no matter what I try, I have not been able to make the fallback of React.Suspense to appear when useSuspenseQuery is pending. Has anyone else encountered difficulty with this? Would really appreciate any help.

equal-aqua

1/21/2025

Query is fetching multiple times

I made a simple application to test this. 1. I created a server action with a delay to fetch the current data 2. I have a page "my-data" where I display the data 3. Then I go to "edit-data" where I simply invoke the removeQueries and then go back to "my-data" 4. On "my-data" the query is called 2 times...

metropolitan-bronze

1/19/2025

`queryClient.prefetchQuery` is not storing the data in cache when using in Next.js with RPC calls

I am using Next.js with Hono as the backend. Here's how I am prefetching the data on server component ...

flat-fuchsia

1/17/2025

Custom query persist and Network error leading to removal of stale data from storage.

In React Native with TanStack Query V5, we persist query data to secure storage using createAsyncStoragePersister with the React Native Keychain library. The stale time is 15 minutes, and the maximum age for persisted data is 28 days. Scenario: GIVEN stale time elapsed, the query has stale data and the mobile device is offline, ...

adverse-sapphire

1/17/2025

Hydration Issue in Next JS

I have created a simple demo setup to showcase my issue. please find the sandbox link. please fork and use https://codesandbox.io/p/devbox/test-xxhhfy First, I am prefetching the user data in the page.tsx as instructed in https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr. The initial render on the server works fine. The counter value is incremented when the user clicks on the like/dislike button. till here everything works fine but when I refresh the page, the initial rendered data is coming instead of the latest data after the user updates the value by clicking. Can you please tell me where I am making the mistake?...

noble-gold

1/17/2025

Differentiating refetch indicators for better UX

I have a UX question for my app. I have realised that I have two categories of refetching if I have to perform invalidation of a query after a mutation. One, is If i take any mutation action on the query while it IS being Displayed, then I do not want two separate loading indicators to flash -one linked to mutation pending state, and second for refetching the query after mutation succeeds. Here I can return the promise of invalidation from my onSuccess callback to keep the mutation pending and not have any indicators for isFetching or isRefetching. Second, if I have some other mutation (or same mutation) in different part of the app which also invalidates the same query while the query was not in view. When the query is displayed again, it does a refetch, but this time I DO WANT TO show some pending indicator related to refetch of query. ...

compatible-crimson

1/16/2025

Polling stops and doesn't resume

Hi everyone 👋 I’m encountering an issue in my React Native app where, under specific conditions (likely involving iOS users on the release app in power-saving mode and/or transitioning the app between the background and foreground), the polling functionality stops and does not resume. Does anyone have insights into what might be causing this issue? ...

other-emerald

1/16/2025

Is it okay to use tanstack query with next js 12 and react 18

Hello there. In my office production app they are using useeffect for all data fetching task and the code becomes messy as I always use tanstack product in my personal and other projects. So is it okay to use tanstack query in next js 12 with react 18. I am worried that it will break anything and it cause of my job. Thank you. 🙏 just need quidance

eastern-cyan

1/15/2025

prefetchQuery x next.js server side

Hey guys, I am using prefetchQuery in my Next.js app, but for some reason, instead of the data being instantly accessbile on the client, it actually returns undefined and then the data can someone help me? 🙂 server component: ```js...

sunny-green

1/15/2025

Best way to persists running mutations across mounts

Im running a mutation inside a "dialog" -, if the user closes the dialog, and then re-opens it, the mutation pending state is lost, which is to be expected. But what is best practice to handle such situations? I have experimented with various apporaches such as: - Setting a mutation key, and reading state using useMutationState in a sperate hook - Setting a mutation key, returning a different isPending boolean...

vicious-gold

1/15/2025

Reset query state when using skipToken

I'm using skipToken, but whenever it is active all previous query data stays in the query. Is there a way to just make the data be undefined in this case?

old-apricot

1/15/2025

in search data is falling back to placeholder, due to key change

I am implementing a search on click, but when I change the searchBy the data falls back to the placeholder data, which is expected. since it's a different key that points to a different cache. tha solution, I found is to remove the searchBy from key, but eslint is not happy, is there any other recommended way to do this? ```tsx...

eager-peach

1/14/2025

Any thoughts on why I'd see a tanstack query go "stale" in the dev tools but not get re-queried?

I have two components, one which allocates a "create-new <thing>" button. The other component queries the backend for the things and renders them out as cards. When the user creates a new thing, clicks the button I invalidate the query to force a re-fresh of cards. In the dev tools I see the queries go stale, but it never re-freshes. ...

sensitive-blue

1/14/2025

`pageParam` never seems to get inferred correctly from initialPageParam

```js export const useEnumerateProjectsInfiniteQuery = < TData = EnumerateProjectsResponse, >( requestData: EnumerateProjectsRequest,...

eastern-cyan

1/13/2025

Keep data while is loading using placeholderData

Hey, I was wondering if you could help me with something I have a page with products and when I delete a product, I need to refetch a specific function to update the list without the deleted product. So I have something like: queryKey: ['my-key', products] I was using isPending to show an initial loading state, but every time I deleted a product, the loading state would appear. So, I did some research and learned about placeholderData and it worked. I added placeholderData: (prev) => prev, but when there's only one product in the cart and I delete it, the product still appears. ...

old-apricot

1/13/2025

using `select` as an `onSuccess` replacement

in reference to this article https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#react-query-v5 (great article btw) the recommend way to sync state is to use useEffect in use land...

continuing-cyan

1/13/2025

Getting a single item from query cache

Currently I have an api for getting all /folders and all /files (using React + Vite in client). In the client, the sidebar component fetches the folders which in turn makes them into links (example returned folder{name: "Primary", id: 'randomIDaeqw123'}). Main component is essentially a route that fetches the files of the current folder when you navigate using a folder link. Now, I want to create a Breadcrumb component inside the Main. I already have a query to get all folders which also coincides with the data needed in this Breadcrumb component. 1. I'm thinking of just filtering/finding a single folder from the cached folders. Is it expensive to filter the cached queryData just to get a single item?...

sensitive-blue

1/11/2025

useQuery function stuck on pending status randomly

hey guys, i have this useQuery function that gets data from an api. the function gets stuck on status : pending and fetchStatus : idle even tho it managed to get the data. it happens randomly, meaning sometimes it manages to return the data so im not sure why it happens. using claude ive added some console.logs so he changed the function a bit but nothing changed. ...

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