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
How to handle when query depends on a non string/JSON serializable object reference?
I am not fetching any API external data, I am using React Query as an async state manager in one of my projects.
A specific query depends on many other object references to be transformed and be available in the shape I want.
These other object are very large, and some of them are not JSON serializable. ...
What are some common practices regarding queryOption abstractions?
I basically have two hooks for each API request now. One is strictly queryOptions that utilize the queryKey and queryFn that allows me to spread into any useQuery hook.
For most of my API handlers i abstract it even more by doing something like useResource().
These call useQuery and spread in the queryOptions. ...
US partner wanted for a profitable venture
I’m working on an exciting business idea and need a partner to help bring it to life.
Here's what you can expect:
-A comfortable fixed monthly salary with a light and manageable workload.
-No financial investment or technical expertise required—just your willingness to collaborate....
MutateAsync error handling (callback vs. try/catch/finally)
Is it more appropriate to handle the mutation lifecycle during mutateAsync using the callbacks on useMutation (onSuccess/onError/onSettled) or to use a try/catch/finally to do that?
Right now we're using mutateAsync during a form submission. The problem is it requires a try catch so if an error occurs it doesn't throw an unhandled exception. Some of the devs are catching the error and putting a //noop as a comment and handling errors via tha callbacks and others are handling the lifecycle within the try blocks instead.
Looking to see if anyone has a recommended pattern or if there's a preference so our team can maybe standardize it if possible....
Reconcile query invalidation with fresh data, selectively overwrite cache.
We are looking at a long overdue rewrite of our app, but in the interim I'm trying to make the app friendlier for updates from multiple users. The quick way - which works great - is to invalidate the cache on every update with optimistic updates (and refetch on window refocus). Problem is we are returning a lot of data every time we do this. So what I was hoping was to do an initial load for all data, and on subsequent invalidations, only send the data that has been altered since the most recent invalidation (maybe a list of id's as well, to check for deletions). But then I would like to only update the rows that have changed (or removed the ones that have been deleted). Do I want to set queryData on a successful update, instead of invalidateQueries? This is in lieu of pagination or infinite scroll, which will be a feature of the rewrite, along with more focused data fetching in general. So for example if we have a list of todos, when changing the title for one, it would only return todos whose updated_at property is after a certain date (the initial data load), but it would still keep the other todos, which haven't been updated, so don't need to change. I'm thinking about a case where one user has changed a todo title, and another user changes another title - the second user will see the first user's update.
I just need a quick QOL improvement that would reduce a user's chances of overwriting other user's data....
useSuspenseQuery when offline
What is the correct way to use useSuspenseQuery when offline?
I am using the
experimental_createPersister so the network mode is set to offlineFirst. Whenever I render this when offline, and no data is persisted yet, the suspense fallback (LoadingComponent) keeps showing. Instead I want a placeholder to tell the user they are offline and they should retry when online.
```ts
<QueryErrorResetBoundary>...`keepPreviousData` with `useSuspenseQuery` with nextjs streaming ssr
I am using
useSuspenseQuery with ReactQueryStreamedHydration from @tanstack/react-query-next-experimental
This works great
However my query has a regular changing query key, but I want to show the previous data during loading states
So I switched useSuspenseQuery to useQuery with placeholderData: keepPreviousData, this also worked great however it lost all of the server streaming behavior...queryOptions counterpart for useMutation?
Hello everyone,
I recently discovered that you can share configurations between queries using
queryOptions as mentioned in this section of the documentation:
https://tanstack.com/query/v5/docs/framework/react/guides/query-options
I was wondering if there was a counterpart for this for useMutation....Query returning old data after mutation when manually setting data using setQueryData
```
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getCompanies } from "../services/auth";
const COMPANY_KEY = 'companies';...
How to mock loading/error states.
In storybook I'm using setQueryData to set mock data. How can I manually set loading/error states?
Vue Query 401 Unauthorized response
Hello, I'm using Vue Query (TanStack), and I'm trying to handle errors globally. Specifically, I want to redirect users to a login page if any query fails with a 401 Unauthorized response.
What are the recommended ways to handle this scenario in the current version of Vue Query? Are there best practices or patterns for managing this globally without duplicating the logic in every query?...
How can I pass an authorization header to all queries and mutations
Hello
I have this code that allow to me pass my token to all my queries and it works fine. But I'd like this for my mutations too if possible.
```ts...
UI gets stuck after updating React to React 18
Hey,
we've recently updated our app to React 18.
these are our dependencies:
```json...
Is there a way to either go back to initial state or set data directly?
I have a use case where if a certain filter is removed, the whole datagrid/filters should reset
How do I tell useQuery that initial data is prefetched on the server?
I have a Remix app and in my loader function I prefetch the data. Then on the client side I use useQuery as described in the docs Remix example. However the type of my data is
MyData | undefined because useQuery doesn't know the initial data will be there. How do I solve that? For now I solved it by setting initialData: {} as MyData in useQuery but I wonder if there is a better way?How to use CSS Modules with TanStack Start?
I'm struggling to make CSS Modules work properly. Currently, the styles are being loaded only on the client, causing a flash of unstyled content (FOUC) during initial render.
I tried in this repo https://github.com/tanstack/router/tree/main/examples/react/start-basic
Your Example Website or App
https://github.com/tanstack/router/tree/main/examples/react/start-basic...
response.json() failing only within useQuery - receiving HTML instead of JSON
Hi everyone! I'm encountering a strange issue where my API endpoint works perfectly fine outside of useQuery but fails when used within it. I'm using
"next": "14.2.5"
What's strange is:
The endpoint works perfectly when called directly or in a normal fetch...refresh in useQueries cause infinite rerender
Do you know why
useAllData causes a re-render, whereas useOneData data works normally?
```
const useOneData = () => {
const { data, refetch } = useQuery(["a_key"], async () => {...`getPreviousPageParam` final parameter - is it the "current" page or is it the previous page?
Hi,
Sorry for the repeated queries, I'm just having a hard time getting my mind around
useInfiniteQuery.
So the documentation code here:...
Setting gcTime on prefetched data
Scenario:
Using
prefetchQuery on the serverside to fetch some data for the page. The page that is loaded does not actively have a useSuspenseQuery call for that particular piece of data, it is only used on other pages. The useSuspenseQuery sets a gcTime of Infinity to disable garbage collection on the prefetched data. The prefetch call also sets gcTime of Infinity.
The problem:
The prefetched data stored in the query cache gets a gcTime of "5 minutes" when there are no active queries subscribed to it, since there is nobody there to tell it otherwise. That means there doesn't seem to be a way to keep the prefetched data around until it's actually used by a query hook, without just calling a "dummy" hook on every page to make sure gcTime is set?...