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
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 QueryI 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....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'?"
...
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
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?...
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?...
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...
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,...
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 functiononSuccess 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
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...
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):...
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;...
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.
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.
useQuery does not re-render when using in 2 separate components at the same time
I have 2 components, in the tree they live at the same time (not always, but by default, they do).
One component call it the "header", lives always, and when a prop changes, it triggers the useQuery hook and fetches data. All good here.
Second component, call it "consumer", lives sometimes, and needs access to that fetched data. This one calls useQuery with "enabled" set to false and has the same queryKey as the
header does. The problem is, when header finishes fetching, consumer doesn't re-render, it doesn't get the newly fetched data until I manually remount it after header finished fetching....Feature request: refetchOnUnmount?
For any team members here, has adding refetchOnUnmount been discussed at any point? Think we'll see this in Query's future?
How to avoid triggering suspense fallback when using ssr prefetch+suspense after first render.
I have a component that uses useSuspenseQuery and the page uses prefetchQuery. The project is a next.js app router app. The client component has buttons that changes the params used in the query. Every change triggers the suspense fallback. Is there anyway to just render the suspense fallback for the initial render?
Confused about using React Query as a state manager for Nextjs dynamic pages
Hello, I'm a bit confused with how to use the React Query as a state manager.
Let's say I have a dynamic route like /list/:slug
I first prefetch the query like this....
Query with Pagination + Filters
I'm implementing pagination with filters using React Query, and I've hit an interesting UX issue. Here's the scenario:
```ts
// hooks/usePatients.ts
export function usePatients({...
Updating hydrated data in Next App Router via a server action
Hello, I'm trying to get something working that basically involves a combination of Prefetching / Hydration of React Query and changing that data later using a server action. The basic flow:
- in a root layout file, I'm prefetching some data and using a HydrationBoundary to pass it to the client
- I'm passing promises rather than resolved data so that things will suspend on the clientside until those initial server requests are completed
- the clientside eventually loads and renders properly with that prefetched data...