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
Suggestions on dynamic refetchInterval adjustment
I'm aware of the fact that
refetchInterval takes a function to allow it to be adjusted, which is great. I'm wondering what the suggested/ideal approach is for the following scenario:
What I'd like to achieve is to be able to trigger a more rapid refetch after a job is triggered by a button push, and then fall back to a more relaxed schedule once all the tasks associated with that job are complete. The idea here being that the UI should be more reactive when a job is ongoing, but in the interest of performance should slow down if nothing is happening.
The issue I'm encountering is that because I'd like to use a more relaxed interval as my default (30 seconds), it takes a long time to trigger the recalculation to switch over to the more rapid interval (5 seconds). I'd like the switch to be instantaneous....refetching from child component with typescript?
What is the best way to refetch a query from a child component when using typescript?
Do you pass refetch from the parent, then set up the interface props like this? Or is there a fundmental react-query method that I'm missing?
```import {QueryObserverResult} from "react-query";...
v3 -> v5 migration; issues with SSE
While upgrading from react-query v3 to v5, I've hit a roadblock related to custom code that subscribes to an EventSource and updates the queryData in the queryClient on each new event.
It looks like this:
```
const useSSECacheUpdater = <T>(...
Invalidate query in react native
Using an infinite query in react native. One screen has
```ts
useInfiniteQuery({
queryKey: ['posts', user.uid]...
When is "select" function called exactly?
Hi!
I'm working on reducing number of re-renders of a particularly slow component. Currently, we are transforming data returned by
useQuery call using useMemo, which results in everything being called twice whenever there's a change.
I moved the code from useMemo into a select handler and extracted the handler to a stable function reference....TypeError: (0 , _tanstack_react_query__WEBPACK_IMPORTED_MODULE_2__.useQuery) is not a function
Hey there, I get this error on Next 14.0.3, NextUI and ShadCN combination. I use Linux Mint. I tried Bun, Pnpm, npm... I tried changing the versions...
I'm going to lose it. What could be the problem?
```js
import { useQuery } from "@tanstack/react-query";...
Error boundary does not seem to reset suspense query properly when leaving the page with the error.
Lets say Page2 executes useSuspenseQuery that fail. The query is rendered inside Suspense, ErrorBoundary and QueryErrorResetBoundary inside the Page2.
Steps
- Navigating to Page2
- Loading state on Suspense...
Error Handling with Fetch works but isError always returns False
So I am using NextJS with page router, and in my code, I have an API that can return either a status 200 with the data or several other status codes (404, 403, and 500) depending on access permissions.
Following the docs, I wrote my react query function as follows:
```tsx
export async function getPlanFn(planId: string) {...
Mutation promise resolution
The mutation docs mention that "additional mutation callbacks won't run if the component unmounts before the mutation finishes." What exactly does this mean? Does this mean that anything that would be triggered by any mutation callback will not happen if the component unmounts before it completes?
useInfiniteQuery not inferring types
on typescript 5.3.2
on @tanstack/react-query@5.8.4
the following is not inferring the correct types for useInfiniteQuery result
```...
react query vs redux toolkit query
Hello,
I would like to have your advices about my application.
It is a global application with 4 independants apps. It looks like if you Want a monorepo....
useInfiniteQuery error
This is an error that occurs when implementing infinite scrolling.
It seems to occur because undefined cases cannot be handled when initially loading data. When you refresh, the data is loaded normally. To handle this part, I tried giving an option or using a try catch syntax, but it didn't work.
This error suddenly occurred one day after writing the code and confirming that it was working properly.
```tsx...
Error from axios how to handle it
Here is the mutation query
```
export const createWorkspaceMutation = async (data: createWorkspaceFormData): Promise<createWorkspaceApiResponse> => {
const response = await axiosinstance.post<createWorkspaceApiResponse>("/api/createworkspace", data);
return response.data;...
Errors while using query in combination with table's subComponent ft.
Hey 👋🏽
here's a codesandbox showing the issue:
https://codesandbox.io/p/devbox/subcomponentwithquery-5h5tct?embed=1&file=%2Fsrc%2Fmain.tsx%3A3%2C27
...
Tracked Queries and Providers
When fetching data with a
useQuery but doing so in a provider to pass this data around, does doing this ruin tracking and make react-query watch all variables?
Can you also give a good example of when and when not to be using queries in a provider. We typically call them in a provider, mix with some other logic and return data. Should this 'mix with other logic' typically happen within the queryFn and requirements for Provider passing the data is more of the edge case?...Mutation -> Invalidation + Refetch or setQueryData
Currently in our app, we have a lot of scenarios where we do the following:
```
const mutation = useMutation(
(params) => {...
next 13
How can I create a generic type of queries? Say I want to pass a prop through to a component such as this:
...
dayBookQuery: (opts: DayBookOptionProps) => SWRResponse<SupabaseManyRowResult<T>, PostgrestError>;
dayBookQuery: (opts: DayBookOptionProps) => SWRResponse<SupabaseManyRowResult<T>, PostgrestError>;
react-queryv5 showing toast onSuccess
I have a custom hook ```/* eslint-disable @typescript-eslint/no-unused-vars */
import { queryKeys } from "@/app/constants/queryKeys";
import { ExchangeRates } from "@/app/types/Currencies";
import { CURRENCIES_API } from "@/config/api";
import { useCurrencyStore } from "@/src/currencyStore";...
Client side error 400. What's wrong
index.tsx
```tsx
...
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();...
useInfiniteQuery
hi
i wanna use useInfiniteQuery
but my server needs pagination in query params, should i include this in my queryKey?...