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

eastern-cyan

12/13/2024

Persisting error state in react-query until successful refetch

I'm using React Query to fetch a list of users via the useQuery hook. When the fetch fails, I display an error message along with a retry button. When I call refetch, both isError and error are immediately reset to false and null. This results in the error message disappearing momentarily, which I want to avoid. Is there a way to persist the error state in React Query until the data is successfully fetched without using additional React useState to track the error manually? Ideally, I'd like to keep everything managed with react-query. Any suggestions or best practices would be greatly appreciated!...

unwilling-turquoise

12/12/2024

Is it possible to globally configure QueryClient *after* it's instantiated?

I have a use case where a feature flag loaded asynchronously needs to control the global configs, ie. disable retries. Wondering if it's possible to do this after QueryClient is instantiated.

rising-crimson

12/11/2024

Simple question regarding redirecting on error

I have a simple question. Take the following code: ```ts const { isError } = useQuery(getUserInfo); if (isError) {...

conscious-sapphire

12/10/2024

`fetchNextPage` - how does it work?

So does fetchNextPage unpack the result of the queryFn with the new page parameters and the pop it into the pages array? Or does it replace the data.pages entirely? I doubt it's the latter, right? But what it's doing underneath seems really weird and I don't understand it.

deep-jade

12/9/2024

Why is `isMutating` positive once `onSettled` is called?

Hey there 👋 I am currently attempting to update query data with the result of a mutation, but I only want to do this assuming there are no in-flight mutations. However, when I check the isMutating state of the mutation once onSettled has been called, I find that it is always at least one, even if there was only 1 mutation executed. At this point, I would assume that the mutation would not be considered "mutating" any longer. Does anyone know why this might be?...

foreign-sapphire

12/9/2024

Issue with re-validation on production with Next.js App router.

Hi everyone. In my project I have several queries and mutations. recently I've seen some weird issue in some areas of my application when a mutation is successfull, in onSuccess callback, I'm revalidating a key, related with a query. the mutation is successfull but sometimes this successfull mutations does not ends up with fetching new data. please notice that the same process might work properly on local enviroment...

unwilling-turquoise

12/9/2024

ensureQueryData and preloading routes

Should ensureQueryData refetch stale data when used in a tanstack router loader and a Link to that route is set to preload? I'd expect the page data to be already loaded when navigating Links, but the stale data is briefly displayed before the new data is fetched.

national-gold

12/7/2024

NextJS 15: HydrationBoundary not passing data to client component when prefetching

When i try to prefetch data in a layout or page.tsx, and then useQuery in the client component wrapped in a HydrationBoundary, the data is not loading on the page. It works fine if i remove the hydrationboundary wit hdehydrated state, but then im doing client side fetching, i want initial data to be server side QueryProvider: ```...

afraid-scarlet

12/7/2024

data always returns the last api response

Hello everyone! data always returns the last api response. Is it possible to get only fresh response from data. In case of api failure or ongoing request, data return null ? const {refetch, isFetching, data, error, isSuccess} = useQuery({ queryKey: ['todos'], queryFn: query, staleTime: 0,...

xenial-black

12/6/2024

Great Chance

Hello everyone. I'm Senior Software engineer. I'm looking for a collaborator who can work with me. Location: From anywhere Budget: 3000 usd Monthly working time: EST time zone...

fair-rose

12/6/2024

I have problem with reconnection

when my app lost online after renew them react-query refreth query and all of them who wait online resolve with error ERR_NAME_NOT_RESOLVED, maybe you know this problem and can give me some suggesting for solving that I see that timing in problem requests after reconnecting (pic 1)...

sunny-green

12/5/2024

Optimistic Updates with Multiple Cache Keys in TanStack Query

Hi everyone! 👋 I'm working on a feature to fetch and display a list of equipment items. The query supports pagination and filtering, which results in dynamic query keys (e.g., ["equipment/fetchEquipments", pageSize, page, serialNumber, conditions]). When I perform a mutation (e.g., deleting or updating an item), the backend takes a few seconds to synchronize the changes. In the meantime, I need to optimistically update the cached data across all dynamic query keys to ensure the UI reflects the latest state....

other-emerald

12/5/2024

How to handle query key requiring object with bigint?

A complex object with bigints should be set as a dependency in the queryKey array, however react-query errors as it is unable to parse the object. How to solve this?

rare-sapphire

12/4/2024

Using useInfiniteQuery to gather all pages

I have a case (at day-job) where we have an API that uses pagination. In most cases, we just use the pagination as-is, using useInfiniteQuery. However, we also have a case where we need to fetch all pages of data "in bulk". That is, if there are 5 pages in total I need to be able to get all 5 before returning data to the application. Each request requires a "token" parameter that comes from the previous page's response. I understand how to get that via getNextPageParam, and I know that the hook's return object includes a function called fetchNextPage. But the examples I've seen in the docs all assume that the app only wants one page at a time and only gets the next page based on an event from the user (button click, etc.). Is this possible, with this particular hook? I wrote a custom hook that uses queryClient.fetchQuery(...) in a loop. It works, but it doesn't update either after the data becomes stale or after the cache is forcibly cleared with invalidateQueries()....

frozen-sapphire

12/4/2024

Wait for multiple queries to succeed

I'm looking for a way to wait for all queries to have the success status, is there some build in equivalent like this example below? ```ts export const combineQueries = <T extends Record<string, UseQueryResult>>(queries: T) => { if (Object.values(queries).every((query) => query.status === 'success')) {...

stormy-gold

12/4/2024

Inactive queries cause refetching

Hi! I have a thing that I don't clearly understand. I have a couple of queries with different keys. During actions in application some of them become inactive, but when I come back to component with them (they're still inactive, not stale) - react-query still makes requests. Why is it heppening?

inland-turquoise

12/3/2024

How to hide error messages in console when throwing in queryFn()?

In the docs it says to throw on errors in the queryFn, but when I do I get this error displayed in the console This is the code I use to throw to test ```TS export const organisationQueryOptions = (orgName: string) => queryOptions({...

flat-fuchsia

12/3/2024

When to use select vs other options for displaying subset of data?

Scenario: I want to toggle between displaying data1, data2, and combinedData. I'm just getting started with react query and trying to understand what is the right approach: 1. useQuery to get the combinedData comprising of data1 and data2, use select to filter to data1 or data2 as needed 2. useQuery passing an argument to the queryFn to decide which dataset to fetch...

rare-sapphire

12/2/2024

QueryClient shows my cache is being updated during my mutation. However the component isn't updating

Like my title says, I did some stack refactoring that seemed to be unrelated to this but now my useQuery hook doesn't seem to be updating with the new value. Can anyone spot anything wrong with my pattern here? My log on line 48 (picture 1) is showing my query is in fact being updated like I would expect, but I don't see the new data in my component (picture 2)...

genetic-orange

12/2/2024

How exactly is "previousData" in "placeholderData" defined?

In "Placeholder Data as a Function" (https://tanstack.com/query/latest/docs/framework/react/guides/placeholder-query-data#placeholder-data-as-a-function) it says:

placeholderData can also be a function, where you can get access to the data and Query meta information of a "previous" successful Query

I noticed, that when I run a query with key ["data", "1"] and then a 2. query with key ["data", "2"], the second query gets the data from the first one, even they have different query keys. If run the second query with key ["data" ], I don't get the data from the first query....

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