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

automatic-azure

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

yappiest-sapphire

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

quickest-silver

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

flat-fuchsia

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

adverse-sapphire

11/20/2024

pageParam on infiniteQuery is undefined?

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

sensitive-blue

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

equal-aqua

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

wise-white

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

fair-rose

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

harsh-harlequin

11/19/2024

mutateAsync throwing error in nextjs

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

harsh-harlequin

11/19/2024

Suspense confusion

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

sensitive-blue

11/19/2024

react-query-devtools

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

harsh-harlequin

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

yelping-magenta

11/17/2024

Invalidate query?

```tsx const { isFetching, isError, isSuccess, data } = useQuery({ queryKey: ['...'], queryFn: async () => { const startTime = Date.now();...

harsh-harlequin

11/15/2024

Aborting paused mutations

Is there a way to abort paused mutations with specific variables? E.g. I'm currently offline and I trigger mutation (which has own scope) multiple times. When I go online that mutations start calling mutationFn one by one. If one mutation in chain throw an error, onError handler rollbacks optimistic update. And in this moment I want to abort all further mutations with specific variables. Because next mutation probably will throw an error too and their context has already invalid previous value that should not be used for rollback....

sensitive-blue

11/14/2024

jwt in query key

I have endpoints (they happen to subscriptions over WebSocket via https://docs.convex.dev/client/tanstack-query) that have a JWT as inputs. I think I want to add the JWT as another element in my query keys, although I'll use some hash-like function that takes just the pieces I think matter about the JWT (just things like subject, ignoring things like expiration tiem) and stuff them in the query key array. Is there a standard approach here? I think this JWT hash will go at the end of the query key, does that sound right? It's be something like ${claims.subject}-${hash(claims)}....

extended-salmon

11/14/2024

QueryOptions default error type

in v5 when using useQuery the default error type is Error, however when using queryOptions helper the default error type is unknown. Is this this is on purpose?

helpful-purple

11/14/2024

How can I specify accepting a queryOptions as a type?

I want to make a SelectAsync component that accepts this prop: ```ts /** * A react-query queryOptions to be passed to {@link useQuery},...

deep-jade

11/14/2024

Using useInfinteQuery and FlashList together but having issue immediately showing updates

I have a list of items, and a favorite button. When I press the favorite button, it does not update for a few seconds. I need to optimistically update the button to be filled in when pressed. is there a way to conditionally render the favorite button before the data in the query is updated from the server? Maybe the issue is in the logic itself inside of the touchable opacity button...I am checking against the data list "Favorite" which is coming from server, so that is probably why. Rather than...

continuing-cyan

11/13/2024

What is the right way to do on click SSE query that feeds multiple components

I have a long running Server-Sent-Event query that I want to fire on button click and the events from it are rendered in two components on the same page. The query should be cancellable as well. This is the rough pseudo-example with questions: ```typescript // APIClinet.ts // I would like this to be reusable, if possible...

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