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

robust-apricot

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

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

fascinating-indigo

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?

sensitive-blue

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

statutory-emerald

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

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

deep-jade

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

fair-rose

12/1/2024

isLoading relation with React native navigation context

Hi Guys, need your help on this one. Issue: when using query.isLoading in one of components during the initial load and on hot reload im getting the below error: "Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?" ...

conscious-sapphire

11/30/2024

React Query can return RSC or JSX in the future without Tanstack Start?

I think my team might not move to Tanstack router and keep stick on React-router. But I really like Tanner’s view that RSC is just api with returning jsx. So wanna ask that React-query has any long term plan that will integrate to return RSC if possible without using Tanstack Router or Tanstack Start? If that so, will love to use it

inland-turquoise

11/29/2024

Drag and drop list flickers back to original position for a second before optimistic update kicks in

When dragging and dropping an element in my list (using dndkit), it all works fine when I am working with local state. However, when I use react query with optimistic updates, the UI flickers back to the original ordering for a split second and then renders the new order. Note - The flicker happens before the invalidation completes so the new (optimisitic) state does kick in before the new response is cached. I have validated with local state that my drag and drop is set up properly. What could be causing this split second flicker?...

fascinating-indigo

11/29/2024

How i can await revalidation in other component?

I have a react-query request hook with a specific key. I invalidate this request by key in certain circumstances. But in another component I need to await data is successfully received, can I somehow do await? I tried to do this via queryClient, but nothing worked for me. Can you please tell me the way?...

wise-white

11/27/2024

Need a Skilled Developer for my React+Node Project

We're developing a startup game project that utilizes React and Node.js, and we plan to incorporate additional functionality into it. - loading screen update - change the ship rectangular - the user can manage their name...

extended-salmon

11/27/2024

queryClient through microservices (libraries)

Hey, im wondering about how to manage to share queryclient from an app into some microfrontend (libraries). Could it be pass by props in a configuration object ? is there a better way ? Then in librairies, would it be okey to pass the queryclient into a QueryClientProvider, or should I pass it to all my queries ? Appreciate sharing about this implementation,...

eastern-cyan

11/27/2024

Type definition for staleTime function parameters

I have a call to useQuery that if successful returns a StripeOnboardingLinkDto. The Query Key is ["getOnboardingLink", {}]. How would I capture this in the Query type used for the staleTime function

equal-jade

11/27/2024

onSuccess is not working in component file

i have uploaded both component file and query file, onSuccess is working in component file but not in query file whats the issue here

foreign-sapphire

11/26/2024

Input Focus Lost After Mutation with Optimistic Updates

Problem Description I'm experiencing an input focus issue with React Query mutations. Here's the exact behavior: 1. User types in Input A and triggers a mutation (e.g., updating a module name) 2. User immediately tries to focus Input B 3. Input B gets focused momentarily...

magic-beige

11/25/2024

Dependent Query Pattern

At my work we frequently run into situations where we need dependent queries for a bunch of items and I don't know a great pattern for it. For example, let's say I have a list of cards and each card has an owner, but only the owner's ID. And say I have a separate endpoint to get details about the owner of the card using their ID. But I need to do that for each card and then combine all that into a "final card list" where each card has the details for the owner as well, not just the ID. How can I do that? Obviously it would be better if the api just returned the completed result with owner data already with each card, but i often don't have that luxury and even have more layers of dependent queries than just one layer in this example. Crude example (I know I can't conditionally call the hook like that in the forEach, just an rough example of what I'm trying to do):...

xenial-black

11/25/2024

What is the best Query and mutation code format ?

HI everyone ive been using tanstack query now for a little while and i love it its amazing. However i realised i have been querying data in a very poor way, doing it all in the same page with the html. I have now learned creating custom hooks with error handling. My question is what is your recommend format and how to write custom hooks your way or is there a perfect way? How can i imporve my code below ? ``` type Member = { id: string; name: string;...

passive-yellow

11/24/2024

Is it unwise to use @tanstack/react-query within a Next.js app?

I have an app that fetches data every time I click a tab. I'd like those fetches to happen far less frequently, particularly only when the respective tab-data changes.

typical-coral

11/23/2024

useSuspenseQuery with react-router

In react router does useSuspenseQuery trigger the suspense boundary after first render? I fetch the data in the loader using ensureQueryData without await. They query uses route params. It works as expected, except when the params change the suspense boundary isn't triggered.

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