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

correct-apricot

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

other-emerald

11/17/2024

Invalidate query?

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

foreign-sapphire

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

relaxed-coral

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

wise-white

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?

sensitive-blue

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

like-gold

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

automatic-azure

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

optimistic-gold

11/13/2024

Invalidate / clear mutation after success?

I pass meta fields into mutation and adjust styles based on the active mutation state, but need this to be cleared after success. So what is the approach to invalidate/clear mutation back to an empty state?

extended-salmon

11/13/2024

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null...

It only works when I pass queryFn as queryFn:()=> getTodos() in the clinet component But gives an error if queryFn: getTodos...

other-emerald

11/13/2024

What is 'request' mean in document?

in react-query document, it says This ensures that data is not shared between different users and requests , I'm confusing the meaning of word 'request' between api request to server and react client of which single user using. or any other meaning of request here? I'm noob to this library plz help!...

deep-jade

11/12/2024

How can I reset query cache without refetching it?

I’m trying to remove data from cache and not refetch it. I have tried reset and refetch queries. They don’t seem to work right....

optimistic-gold

11/12/2024

Stop refetch on page change

Hey guys, I'm using Next 14, I have 2 pages. I use react-query as source of truth in my app whether user is signed in or not, basically I have a session http only cookie and on initial web app request I make another to my BE to ask for user info. All is great when I am signed in, but when I'm not, every time I change the pages in my app react-query tries to refetch the user data which obviously fails. On top of that I'm doing next server prefetching so most of the time if user is signed in the data, will be there on first page load. If he is not signed in or for some reason my prefetch failed, I understand and ofc would love to have one more try on the web, but only one. I tried to pass every refetchOn* prop with false to the hook but it doesn't work. Here is SS of the related code: PS: the useUser hook is used in most of my components, including the ones used on the SS, if that changes anything :x...

exotic-emerald

11/11/2024

Refetch a query with new variables but keep data from previous results as well

From my question, is this possible, please ? It looks achievable "without" react-query itself but maybe there is a built-in function to do this...

sensitive-blue

11/11/2024

Issue with data persisting

Little background : So I am creating an app that calls 5+ APIs for the first load. Also to update any of this data, i make an API call to backend and save the response in the queryKeys with setQueryData() Issue...

harsh-harlequin

11/11/2024

What's the best practice to refetch data on select change that triggers a mutate

Hey guys, I have a following situation and I'm getting nowhere with my limited knowledge of react-query. What happens is that currentActionName doesn't get updated in time for actionData to be updated/refetched so that updateBigData.mutate can be invoked with the fresh data (actionData belonging to newActionName) Here's an abbreviated version of my code:...

vicious-gold

11/11/2024

Prefetch query with nextjs app router

is there anyway to see if im prefetching something on server correctly?

conscious-sapphire

11/10/2024

useGetUser for auth, but pending state/data doesnt reset

``` const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { const { isPending, error, data } = useGetUser();...

optimistic-gold

11/9/2024

useInfiniteQuery with more than 1 param

hy, im trying to create infinite scroll with the useinfinitequery, my issue that it only accept 1 param which is the pageParam, how can i make it accept other params like sort and filter ```javascript import { useInfiniteQuery } from '@tanstack/react-query'; import { useSearchParams } from 'react-router-dom';...

xenial-black

11/8/2024

What's a nice code pattern to revalidatePath on each query?

I have a page that polls for data every 5 seconds. The query loads fine but doesn't show until I have manually revalidated the path (to clear the cache) Is there a best practice for doing this reliably?...

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