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
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! 🙏...Help figuring out why queryFn is firing with stale params
Consider this snippet from a "Widget" component:
```typescript
const queryParams = useDashboardContext();
const { data, isFetching, isError } = useQuery<ScorecardAlerts>({...
Is it considered bad practice to use a GET request with useMutation?
Hi everyone, I’m wondering if it’s okay to use a GET request with useMutation.
Here’s my situation: I need to check whether a specific version exists when the user enters a version name and clicks a button. To do this, I’m thinking of reusing the existing API that fetches the list of versions.
Would using useMutation for this GET request be considered bad practice?...
Error while using Expo: No QueryClient set, use QueryClientProvider to set one
I'm trying to refactor my app, so I tried setting up Tanstack Query. I'm running into an error No QueryClient set, use QueryClientProvider to set one.
Here is the code:
```tsx
const queryClient = new QueryClient();...
Customizing error messages in global onError callback.
Very often I would like to curate the messages shown in a globally configured toast message that is dispatched by a global onError or onSuccess callback on a per mutation basis. For example, a confirmation message could say
Successfully created [name_of_thing] where [name_of_thing] comes from the mutation response. In the case of an error, [name_of_thing] may need to come from local state if the network request fails. I can't use the meta option because the data isn't static. I thought a...Reconcile server data, local state, session storage.
I'll try to be as succinct as possible:
The app I'm working on requires different views to be persisted for an ag-grid instance. We are loading all data (columns, filters, sorting etc.) from our API. But the client has the ability to lock a view - this will prevent any changes from persisting in the database, but will need to reflect in local state. A further complication - if the view is a master view, changes need to persist in session storage but will never update the db. So we are looking at three different states. I'm looking for a clean way to manage these states. I was thinking a custom zustand hook with an optional persist for master view, that can be passed as select function on data returning from the server (privileging local changes to column widths etc, but adding/removing deleted columns). If a view is locked, we update the state in this hook but don't trigger the rq-mutation.
Grateful in advance for any suggestions!...