TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

judicial-coral

11/26/2023

Map queries in a single hook

I have a query from Tanstack-Query that returns an object with inside it an array of variable length (it can be an empty array). Inside this array, there are objects with one URL inside each object.
I want to fetch data for each URL inside one useQuery or useQueries hook.
Currently, I have this useQueries hook which returns an error that queries is undefined: ``` const [results] = useQueries({...

deep-jade

11/26/2023

share mutation state (status)

Hello community, I was wondering if there is a way for me to share my queries state with other components, in this case mutations state? I know how to invalidate query but I want to show currently pending actions object in a list. Here is my current approach with useMutationState:...

fair-rose

11/26/2023

React Suspense with react-query and router

Hello! I'm trying to use react-query and router together with React suspense. The idea being, when a user switches to another page, the page suspends until all queries of that pages component have completed using useSuspendedQuery. I created the QueryClient in the application root and pass it down using the QueryClientProvider. I then included a ...

other-emerald

11/26/2023

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....

other-emerald

11/26/2023

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";...

typical-coral

11/25/2023

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>(...

exotic-emerald

11/25/2023

Invalidate query in react native

Using an infinite query in react native. One screen has ```ts useInfiniteQuery({ queryKey: ['posts', user.uid]...

fascinating-indigo

11/24/2023

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....

mute-gold

11/24/2023

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";...

deep-jade

11/24/2023

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...

equal-aqua

11/23/2023

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) {...

other-emerald

11/23/2023

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?

correct-apricot

11/22/2023

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 ```...

like-gold

11/22/2023

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....

complex-teal

11/22/2023

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...

unwilling-turquoise

11/21/2023

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;...

eastern-cyan

11/21/2023

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 ...

harsh-harlequin

11/21/2023

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?...

harsh-harlequin

11/21/2023

Mutation -> Invalidation + Refetch or setQueryData

Currently in our app, we have a lot of scenarios where we do the following: ``` const mutation = useMutation( (params) => {...

flat-fuchsia

11/21/2023

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>;

...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs