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

optimistic-gold

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

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

generous-apricot

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

flat-fuchsia

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

extended-salmon

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

wise-white

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

frail-apricot

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

extended-salmon

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

fair-rose

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

inland-turquoise

11/11/2024

Prefetch query with nextjs app router

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

genetic-orange

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

other-emerald

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

jolly-crimson

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

deep-jade

11/8/2024

Using queryClient.fetchQuery in the loader of a TanStack route does not activate the query.

In my _layout route, I do the following to fetch data. Then I access this data through useLoaderData hook. This all works great. However, when I check the query in the devTools, I see that it appears as inactive. I use the devTools especially to test the loading and error states, but this does not work for an inactive query. Is there a way to activate it when using queryClient.fetchQuery and also be able to trigger the pendingComponent when I manually do Trigger Loading in the devTools? ...

harsh-harlequin

11/7/2024

Is updating mutation state a good idea?

I am building a offline first react native app. I have a form that user submits. But app allows user to edit this data many times. This is needed when working in basement where there's no internet. I am thinking of mutating the mutation state each time user edits the data. Also, is it good idea to list items from mutation cache instead of performing optimistic updates? Optimistic updates will be lost if user refetches a query....

other-emerald

11/7/2024

How to disable retries when network request is cancelled?

I have a situation where I need to imperatively call queryClient.fetchQuery() to fetch data. Sometimes the network request from this query get cancelled by Chrome where the network status is "(canceled)" (see image). Is there a way to disable retries when this happens? Thank you!

conscious-sapphire

11/5/2024

setQueriesData doesn't match query

Hello people, So uh I wanted to have multi-sorting in a table and the order of the sorting keys is important for my api so I pretty much stole your function and did something like this: ```ts...

quickest-silver

11/4/2024

queryClient and useQuery data is not the same(same query key)?

Hello, I recently started experiencing issues when trying to update my query data using setQueryData and noticed that it wasn't being updated correctly. Then i tried to log the same data from queryclient and usequery and it turns out that there is a mismatch. ```...

deep-jade

11/4/2024

using return value of useQuery as a queryKey

```ts export const useGetCurrentUser = () => { const { data } = useQuery({ queryFn: () => query(), queryKey: ['current_user', 'user', data.id],...

xenogeneic-maroon

11/3/2024

Tanstack query + React hook form

Hi! I have a question about managing form state with React Hook Form (RHF) alongside Tanstack Query's optimistic updates. My use case: - I have a nested form with modules (each module has roles, each role has tasks) - Each CRUD operation (create/update/delete module, role, task) is an immediate API request...

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