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

grumpy-cyan

12/18/2024

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?

afraid-scarlet

12/16/2024

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

xenial-black

12/16/2024

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

clever-tan

12/15/2024

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

passive-yellow

12/14/2024

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

like-gold

12/13/2024

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

flat-fuchsia

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.

exotic-emerald

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

passive-yellow

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.

flat-fuchsia

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

stormy-gold

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.

ambitious-aqua

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

metropolitan-bronze

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

rare-sapphire

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

extended-salmon

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

constant-blue

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

national-gold

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?

conventional-tan

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

like-gold

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

ambitious-aqua

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?

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