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
Is array in query key array compared by value or reference? useQuery, v3
Would the following query key be the same?
```
const a = [1,2];
const b = [1,2];
useQuery(['todos', a], ...)...
QueryClient refetch on store value change
I'm using react-query paired with tRPC. I have a global store value that updates the tRPC context.
I'm trying to trigger a tRPC/react-query refetch when the store value changes. If you click another app, like VSCode, and then click back to the browser, the query refetches properly.
However, when trying to manually trigger the refetch using
queryClient.resetQueries(), it refetches the old data.
Not sure why blurring/refocusing the browser works but manually resetting the queries does not.
...Next.js 13, SSR & two queries while using hydration
I have an issue with making two calls at the same time - one from backend and one from client.
For some reason I have console logs with
public investments on server and client. Fromy my understanding, having the config like have (listed below), should perform everything on server side using SSR, without call on client. Any idea how to fix it?
```import axios from "axios";...
Persistence, cacheTime and garbage collector
Hi! I'm using
persistQueryClient plugin and I set up default cacheTime on queryClient to Infinity, as described here in the docs:
https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient#how-it-works
So garbage collection is basically disabled for all queries by default which is what I expect most of the time.
However, there are queries which I would like to remove from the cache right after they become inactive. Here is a snippet using some example data:...New use case pagination
I have a use case that I think falls under pagination but I'm not sure how to achieve it without adding a couple useEffects. I have an API that I'd like to call that limits results. I want to go ahead and just iterate through and grab ALL records, I don't want to wait for user input to go get the next page.
Right now I'm setting up as an infiniteQuery and then using a useEffect to manually trigger fetchNextPage() like this.
```...
useMutation is returning success on fetch error using Fetch API
Hey, I am trying to signup using a previously used credentials so, I am getting a network error
409 conflict but, useMutation is not returning an error!
It is returning success instead with the error data inside the body the following
```ts
{
"data": {...Disable query on windows click
How can I disable a query if I visit the browser again? I tried to use refetchOnWindowFocus but that did not work:
```ts
const { data: currentSettings, isLoading: isCurrentSettingsLoading } =
api.templateSettings.findById.useQuery(...
Accessing previously paginated data within react query
Hey guys, i'm using React query to power a paginated table, the rows of the table are selectable. The table lib i'm using keeps an array in state of the selectedRowKeys. The issue i'm having is the react-query data at any one time is just that viewable page, so when I map through the array of selectedRowKeys to build the array of the full table rows with all the data, only a subset is there and I get an incomplete array.
What's the best way to handle this (what I can imagine is a common issue? ) I could onChange push them on when I have those rows loaded in the hook, but then i'm having to manage 2 bits of state, and i'd rather have one derive the other. Any suggestions appreciated....
using react query in a standalone hook
I'm trying to use react query in a standalone hook, and I pass in the queryClient, but any time I attempt using the useQueries or something similar, I get errors, which say
No QueryClient set, use QueryClientProvider to set one . But the thing is, I'm in a standalone hook. The original create react app does have a query client provider that is set to surround everything inside the app component. I call the hook inside the top level of the app component. Any help would be much appreciated!v5 placeholderData doesn't work with select option
Hello!
I have this case where my queries are using select to transform the data on the observer level. In v4 I can use
keepPreviousData: true to preserve the previous data while new data is being fetched. Example here -> https://codesandbox.io/s/goofy-brook-q0lvjj?file=/src/App.js
Now in v5, we're retiring keepPreviousData and using placeholderData to also keep previous data. But this doesn't quite the same way as v4 ...Keep request running
"Is there a way to keep a request running while the server is still processing it?
For instance, suppose I have an endpoint to check if the server is still processing a request. It will return a 204 status code if it is still processing it. Is there a way to repeatedly hit the endpoint until I receive a 200 status code indicating that the processing has finished?"
```...
Solid JS queryclient not available.
Hey folks. I was playing around with solidJS and I wanted to use
tan stack query. I created my client, and my provider, wrapping my application, but when I tried to call any part of the library (useMutation, useQueryClient) I would get an error that the client isn't set. I double checked my work that the client passed as a prop to the provider is indeed not null: still nothing. Really not sure what Im doing wrong. I spun up a clone of the project using standard react and the exact same struct...Do you see an error with this mutation/query code?
Hi, I'm trying tanstack query and I have a very basic example, a list of series and a selected serie (which I refetch to get additional data for this. specific serie). When I click on a serie I select it and when I click on the hearth I want to make the serie favorite or not.
```ts
const mutation = useMutation({
mutationFn: (serie: SerieType) => {...
When does onError callback fire?
For react-query, when does the onError callback fire? On every single error? Or on the final error.
For example, if we use retries on a query or mutation, and it fails twice but on the third one succeeds, does onError run twice? Or only on the final settlement of the error.
Thanks!...
Increase timeout
Hey, I'm getting this error
The timeout for this transaction was 5000 ms, however 6930 ms passed since the start of the transaction. Consider increasing the interactive transaction timeout or doing less work in the transaction., I'm using TRPC and React Query, how I can increase this timeout?How to use react query properly with zod and typescript, and also using the query factory style.
I want to use zod and typescript with react query.
I want to implement something like this but with zod.
https://twitter.com/ralex1993/status/1570036707134676994?t=PDiHDOvdhk6b_t_uAyoj4g&s=19
...
refetchInterval and active queries when not on tab
We have an issue whereby we are requesting a presigned url of an image. This expires every minute. I've added a
refetchInterval of 1 minute to request the photo. THis all works well unless the user is not on the tab. Question, is this expected browser behavior as you aren;'t actually active on the tab anymore?onError not triggering
Hi!
I know this looks insane. I am chaining multiple calls together (it's very temporary!). The
onError: () => deleteFirstThing.mutateAsync(_data.id) isn't triggering. I know the call works. createThing.mutateAsync part returns a 403 atm. Any thoughts?
```...InfiniteQueries page refresh
I have a NextJS app that features products. When a user is browsing products via an infinite scroll and clicks on a product, they go to the product page. When they go back, they're in a route that looks like this: example.com/feed?page=3. How can I use infinite query feature such that when they go to page=3 I have pages=[1,2,3] in cache ready to display? Say these 3 pages aren't in cache. How can I use the useQuery or a useEffect so that it fetches the three pages while the user waits for this to load?
Seems like a common flow in infinite scrolls, but haven't found a way to do this via React Query...