TanStack

T

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

extended-salmon
extended-salmon2/1/2023

How to trigger validation schema of formik from another component?

How to trigger validation schema of formik from another component?
continuing-cyan
continuing-cyan2/1/2023

Remove query once logged out

I am having problem on how to remove a query that gets a user data once logout. I want to find a way to force a reload/refetch when I log in as the previous data is shown for a second before changing the details of the new user and is not great. Below my logout logic in mobx store to delete the token...
No description
harsh-harlequin
harsh-harlequin2/1/2023

Side effects inside onMutate

Is it ok to have side effects in the onMutate function? For example when a query value goes from false to true: ```js useMutation(callApi, { onMutate: async (newValue) => {...
fascinating-indigo
fascinating-indigo2/1/2023

Is it ok to use setQueryData to edit query state instead of useState?

Hello, I have a react component where I am editing stripe product in my database. Instead of adding useEffect and useState in my component to handle the state, I thought why not just use setQuery method instead. Is it okay to handle all edits with setQueryData method, meaning creating different handler functions such as handleAddNewProductFeature, handleDeleteProductFeature, editFeatureDescription and so on....
No description
rival-black
rival-black2/1/2023

error state stays isLoading

Not sure if it’s a bug, but using the latest version when a query errors the isLoading state stays true?
automatic-azure
automatic-azure2/1/2023

getQuery for key with all possible ids

Say i fetch todo like ['todo', { id}] but while getting the todo data I want to get for all possible Id's. In a way expectation is to do getQuery(['todo']) to get todos for id1, id2..... Is there an existing functionality to achieve the same?...
fascinating-indigo
fascinating-indigo1/31/2023

Error dehydrating data with dates

I get this following error when I try to prefetch data in my next12 getServerSideProps. What can I do? my data has date properties which are not abled to be parsed ...
No description
fascinating-indigo
fascinating-indigo1/31/2023

Why initializing a new QueryClient in getServerSideProps (next12)?

It seems like its recommended to initialize a new QueryClient in the getServerSideProps, instead of importing a global one. A quote i've seen is that this way you ensure diff users don't get the same data. Is that really necessary?
fair-rose
fair-rose1/31/2023

strange behavior on token

I have a token, that I put in localStorage, then I have this below in a global context, in authProvider ```js const [accessToken, setAccessToken] = useState<string | null>( localStorage.getItem(ACCESS_TOKEN) ?? null, );...
fair-rose
fair-rose1/31/2023

read, mutate, refetch the same query key in 2 components

so I have Component A that uses useQuery to fetch data, and I put it in a key named data. Now I have component B, my strategy would be to use queryClient to read /display the query data so I don't need to do useQuery again, then useMutation to update it. Is this the correct way to do things? Should I just add this is the useMutation in Component B ```js...
ratty-blush
ratty-blush1/31/2023

Is there a way to update a query cache after a mutation?

Like the name suggested, is there any way to update a query cache from a different component after a mutation? There is a way to do it with apollo client with GraphQL, but I'm using a REST api so is there something similar to this? ``` // Documentation from Apollo ...
optimistic-gold
optimistic-gold1/31/2023

Triggering a request before the previous request with the same key is completed

Say a useMutation may be triggered by multiple conditions -> lets consider it being called (almost) simultaneously. Before the previous mutation even finished. What happens when that is the case? Does React Query care about this? Does it wait untill the ongoing mutation request returned 200 or 500 etc.?...
robust-apricot
robust-apricot1/31/2023

prefetchQuery does not inherit the defaultOptions defined in the queryClient

My "defaultOptions.queries" has "staleTime" as "Infinity", but my "prefetchQuery" goes into "stale" mode after a while. Is the intent of "prefetchQuery" not to inherit the options from "defaultOptions"?...
wee-brown
wee-brown1/30/2023

Disable scroll restoration for paginated queries?

How do I handle this scenario? 1. User scrolls to the bottom of page 1 and clicks the next page button. 2. Page 2 loads but the scroll position is at the bottom (instead of the top). ...
quickest-silver
quickest-silver1/30/2023

Query returning html elements. How to append?

My api endpoint returns a html <ul><li></li>Ï</ul> element. How can I append that from the query data to my react component?
dependent-tan
dependent-tan1/30/2023

Return empty result on empty filter

Hey, what's the best way in tanstack query for following use-case? There's a filter input. Initially the query is disabled and no results are shown. When the user fills the filter input and presses a button, the query should be executed and the results are shown. When the filter input is cleared again (this is the part, where I do not know, how to handle it best), the result should also be cleared. Thanks...
adverse-sapphire
adverse-sapphire1/30/2023

Handling queries when fetch function parameter change but you want the cache to remain

Hey guys, My use case goes like this, I'm using react-query to build a package for managing flags (could be feature flags or flags for ab-testing). This package is used as a shared dependency in micro-frontend environment (meaning multiple applications are basically using the same query cache). ...
harsh-harlequin
harsh-harlequin1/30/2023

Solid Query

I am having type issue using createQuery
conscious-sapphire
conscious-sapphire1/29/2023

React Query + NextJS Query Params

I have a React Query inside a React Hook which I am accessing from a NextJS route. Example: /about When I access the route directly, the query works as expected and I can see the query in the react query dev tools. However, I am using NextJS URL query params to control some state. When I access the page with the query params, the react query doesn't work as expected - I cannot invalidate the state and the state doesn't even show in the react query dev tools. Example: /about?isquery=true...
like-gold
like-gold1/29/2023

If the mobile app goes to sleep, on resuming the cache is cleared and the app crashes.

Hey there, I'm currently working on a React Native app and I'm trying to solve for the case where an app went to sleep in the background and was resumed. I'm currently using the 5 min default cache for my cache and refetching on screen focus with the React Navigation focus hook. To prevent the crash from happing I was thinking of two solutions. One use a client side state management as well and fetch when stale like normal. Second, I could set the cache to Infinity for the few queries I never want garage collected....