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
invalidating the first key doesn't work
in tanstack query, what are the possible reason why invalidating ...
["user"] doesn't invalidate ["user", "some-username", "posts"]? i'm sure that i'm using correctqueryClientas well
// useQuery
const threadsQuery = useInfiniteQuery(userThreadsInfiniteOptions(username));
// useQuery
const threadsQuery = useInfiniteQuery(userThreadsInfiniteOptions(username));
Hiring a full stack developer
Full Stack Developer (10+ yrs) | Remote | Long-term
We’re looking for a highly experienced Full Stack Developer (10+ years) to join our team on a long-term basis. This role is open to global candidates and offers full remote flexibility.
🌟 What You'll Work On:
Build and maintain robust backend services using Python, .NET, C#, or Java.
Design rich, responsive front-end interfaces with Angular and React....
Upgrading to v5.59 causes crashes on sandboxed environment
Upgrading react-query from 5.56.2 to 5.59.0 causes my app to crash. I've tried debugging this for hours but cannot figure out what is concretely causing this. My app runs inside a sandboxed JS environment that uses react 18, namely in the Shopify POS app. I can attach the debugger, but unfortunately even the debugger crashes, making it impossible for me to figure this out.
Does anybody have any idea what could be causing this? I certainly don't. I'm not sure if it's just some JS API used by 5.59.0 that is restricted by the sandboxed env, or if its something else. I've been trying to figure this out for hours but haven't had any luck, so wondering if anyone has encountered a similar issue...
Cache update
Is it normal to call several custom functions to update the cache after a mutation when using TanStack Query, or is that considered ineffective?
How to handle Errors in catch?
Hey,
I am relatively new to TypeScript, but I want to learn. I need some help here.
```ts
export const Route = createFileRoute("/app")({...
Correct approach for TanStack Router Infinite Data
Curious if there exists an objectively correct strategy for Router data loaders for infinite queries -- is it a ensureQueryData for the first page, then a useinfinitequery in the body to fetch the rest?
CancelledError from queryClient.cancelQueries: something to act on or ignore?
Just saw this in Sentry when using cancelQueries in the optimistic update pattern. Just wondering what this is ultimately telling me? Should I just wrap it in a try/catch?
Based on the code from the docs:
https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo...
Query Keys for Infinite Queries
Hey! I'm using
useInfiniteQuery for a really big list of posts, and I want to update a single post with queryClient.setQueryData. I thought I could do this with setQueryData(["posts", post.id], ...) but that's when I thought that the infinite query placed items as a separate query key. Can I make it do this, or would I have to do some weird stuff like send down just post IDs from the GET /posts endpoint and for each <Post /> have it's own useQuery({ queryKey: ["posts", post.id] }) bu...State management for animating a list of fetched items
I have a query that fetches a list of items.
When the query updates and has the new list of items at
myQuery.data, how can I access the previous data before this latest fetch to see which items got removed so I can still display them for a moment and add CSS to add a "removed" animation? (E.g. fade out, slide out etc.)...Suspense Query No Enabled Flag
In my current app, we are using xstate for auth management, and we dynamically update axios interceptor to add token into request.
The issue come from when we refresh app and xstate is not initallized yet and suspensequery start making request without token which end up throwing up error. how to handle that case.
i understand the point of suspensequery but is there a way to stop it till the token comes in......
Query Cancellation
Can someone sanity-check my React Query cancel logic?
Stack: React 18, TanStack Query v5, axios 1.9
I have a hook:...
Prefetch query with parameters
I have a
page.tsx that calls a function.
```ts
await queryClient.prefetchQuery({
queryKey: ['posts'],...Understanding Tanstack Query as state
Hey there!
I am hoping someone can help me understand the concept of using Tanstack Query (React Query) as a state manager? I have been reading articles and even playing around with some code myself on how lots of people love using TQ as a state management tool. The idea that your state lives on server-side and you app simply reads from query/cache. This of course seems really cool especially for say data tables etc.
But I am struggling to understand the concept of possibly using that for something that is maybe more traditionally aa client-side state but moving it to server side? Let's say you have user's preferences stored in the database. You could store things like, what colour theme they're using and maybe some other things. You use TQ to fetch this data from the server so on load we know what theme the user has chosen, but now we want them to be able to change their theme choice! Traditionally we'd just use a useState or a Zustand store and our Theme Provider can base what it is showing off that state. Is the idea with TQ that we would trigger a mutation (edit the user's preferences) and then invalidate the TQ query on the user's theme provider so that the theme then updates? So the state is sort of doing a round-trip?:...
How to fetch data on-demand in TanStack Query based on dynamic parameters (e.g. name from a list)
I’m using TanStack Query and have a situation where I first fetch a list of names and render them in a tree component. When I click on a name, I want to expand it and then lazily fetch additional data specific to that name.
Since I don’t know the names in advance, I can’t predefine queries with
enabled: false and specific parameters. So my question is: How can I trigger a query with a specific parameter (e.g. a name) only on button click, without pre-initializing it?
If this isn’t possible directly with TanStack Query, what would be the best practice to handle this type of use case?...Continuous re-fetching of data with changes to existing items
Hi There,
I have one use-case which I don't really have a good idea how to handle it. The usecase is a photo gallery which updates in "realtime". All photos can (theoretically) change all the time on server side (new photos or changes to existing photos like caption or the status). Any change is indicated by a "lastModified" date for each photo.
At the moment without Tanstack Query, I fetch the current list of photos, store it in the state and remember the "highest" last modified date. Every few seconds I fetch the changes since the remembered lastModified date from the server again (it will just return changed ones), go through the results and update the existing items in the state....
Query cache persist when navigating with Tanstack navigation?
I have my query client provider around the router provider
...
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
UseSuspenseQueryOptions data type infer question
hi guy I got some question for the hono rpc, and UseSuspenseQueryOptions from tanstack query
useQuery result is 'any'
```ts
export function useGetFolder({ folderId, queryConfig }: UseFolderOptions) {
return useQuery<Folder>({
queryKey: ['folder', folderId],
queryFn: () => getFolder(folderId),...
[solved] useQuery ignores `retry: false` when `refetchInterval` is set
Title pretty much says it all. Here is my query:```ts
const drivesQuery = useQuery({
queryKey: ["drives"],
retry: false,
queryFn: () => window.electron.GetVolume(),...
Struggling to build a PWA with react-query
Hey guys! I am using
PersistQueryClientProvider with localStorage. I have this specific use case where I have refetchOnWindowFocus enabled, which provides a better overal UX imo. The issue is that when a user is on another application, looses his network connection somehow, then returns to my PWA, the queries will be executed (be cause of refetchOnWindowFocus) and ultimately fail which will then delete the cached data in local storage, why does this happen? Btw im not using the offlineFirst network mode (just using the default one) because that would require me to cache the API data in my service worker (which I might consider now because of all the issues I have building an offline experience).
Tips are welcome! 🙏...