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

plain-purple

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

fair-rose

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.

ambitious-aqua

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.

stormy-gold

11/22/2024

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

genetic-orange

11/22/2024

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?

ambitious-aqua

11/22/2024

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?

national-gold

11/21/2024

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

fair-rose

11/21/2024

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

helpful-purple

11/21/2024

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

conscious-sapphire

11/21/2024

Atomic query invalidation / transaction

Hello everyone ! I am in the process of migrating my Remix app (loader / actions part) to react query and loving it so far. I think the only missing piece is what I call "atomic updates" (or transactions ?). Currently, let's say I write this code :...

genetic-orange

11/20/2024

Best way to sync queries across tabs?

Right now, I am using BroadcastChannel API in a Provider using Context which listens to messages and also provides a send message function I use to broadcast changes. Just wondering if there is a clear/better way for this? It has become somewhat of a maintenance nightmare to keep up. AFAIK there is no official Tanstack Query support for this? please correct me if I am wrong. Would be great to implement something that directly injects into Query Client that automatically broadcasts/listens to invalidate query calls....

stormy-gold

11/20/2024

pageParam on infiniteQuery is undefined?

A bit confused what is going on here. ```js export const enumerateProjectsInfiniteQueryOpts = ( variables: EnumerateProjectsRequest | undefined,...

apparent-cyan

11/20/2024

Stuck in fetching/loading state

Why is the status still fetching? Why is the status still "fetching" and it doesn't want to fetch data?...

fair-rose

11/20/2024

Prefetch Infinite Query + Unexpected Next.js Page Refresh

Hi everyone, I'm currently building a live chat app using Next.js 15 App Router + React Query 5.60.2. I'm encountering a problem when fetching older messages in the chat....

harsh-harlequin

11/20/2024

Avoiding duplicate requests

I am using React Query to query an API for a list of members. The API returns a list of elements, one for each member. I use the list of member IDs as the query key. Imagine that I query members 1, 2, and 3. The response is successful, and now I have their data. I want to be able to query only members 1 and 2 (or only member 1) and use the same data as those queried in the first request. How can I do that?...

sensitive-blue

11/19/2024

Retrieving query data without passing the whole queryKey

Hi all, I have a small custom query: ``` const fetchData = async (params?: IParams): Promise<Data> => {...

foreign-sapphire

11/19/2024

mutateAsync throwing error in nextjs

const mutation = useMutation({ mutationFn: () => { throw new Error("djfljafjoijioejfioajoisdjfoijdaiojfo"); }, onSuccess: () => {...

national-gold

11/19/2024

Suspense confusion

Given the following: ```typescript function App() { return (...

apparent-cyan

11/19/2024

react-query-devtools

```ts <QueryProvider> <Cookies /> <Navbar /> ...

national-gold

11/19/2024

Extract the queryfn return type from a queryOptions object

Is there a typescript helper I can extract the queryfn return type from a queryOptions object Like below ``` const todosQuery = queryOptions({...

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