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

rising-crimson

12/12/2022

Can't get testing library tests to work

Hi, I seem unable to get any tests to work where I test a component with useQuery. I looked at how useQuery itself does the tests but even that didn't help. My pages have a loading prompt and tests always fail because no matter how long my timeout is, screen always contains that prompt rather than actual data. This is what one such test looks like: https://github.com/Makistos/suomisf-ui/blob/master/src/features/publisher/routes/publisher-page.test.js ...

foreign-sapphire

12/12/2022

Refetching queries does not work

I'm trying to refetch some queries after one success but it's not working! I used two ways to handle it by using refetchQueries() / invalidateQueries() ...

unwilling-turquoise

12/11/2022

firebase

Can somebody please help me adding load more functionality with firebase using @tanstack/react-query's useInfiniteQuery? because I found it very difficult to get an idea from docs

compatible-crimson

12/10/2022

useQuery only fetch if cache empty

Is there a built in setting to only run the fetch in a useQuery if the cache is empty? I can think of a way to do it with queryClient.getQueryData and using that value to set the enabled property of a subsequent useQuery. But that seems redundant. staleTime: Infinity doesnt seem to work. Because it only applies to a single useQuery right? So if another component had retrieved the same data, I want this new component to not make the fetch because its already in the cache....

correct-apricot

12/10/2022

Sort in react query

How to sort product using cache product when user select low to high and high to low price value

vicious-gold

12/9/2022

QueryClient invalidation not working when prefetching

Hello all, I have a question, so I am trying to prefetch my data serverside, however when I try to invalidate after an action on my client is not working properly, however If I do not prefetch beforehand and and load the data client side my invalidate works fine,

unwilling-turquoise

12/9/2022

setQueryData

Can we specify staleTime in setQueryData?

afraid-scarlet

12/9/2022

Query data cannot be undefined.

Hello guys, so I have this hook to return some data. the data gets fetched when i check the network tab but the useQuery is throwing some error

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["TOP_REMIXERS"]

```...

equal-aqua

12/8/2022

Previous query error, refetch shows loading

I have a query that as expected on error will have the correct status as error. But when re-focusing the window for instance, the query is re-ran and the status gets put back to loading. I was under the assumption that isLoading was if it was the first run. isFetching would be for all pending requests including retrys. The problem I have that I'm trying to go around is the error state. I have a UI for 404's for instance and while the background retry works the whole component state shifts. ...

passive-yellow

12/8/2022

Why is this type not getting picked up?

...I know I know, code screen shot but I need the highlighting It seems like T is not being picked in B where it is being picked up in A The only difference between the two toy functions is with one I am explicitly stating that i_am_a_number is a number (despite intelisense saying it is in fact a number...

optimistic-gold

12/8/2022

Can I reset all mutation state similar to how I can clear all queries based on key?

I display error or success messages when certain mutations complete. When I switch users, I clear all queries under the user key, but this doesn't reset the mutations I have keyed the same way. Then, the current user sees the mutation state of the previous user.

probable-pink

12/8/2022

storagePersister and staleTime Infinity

Hello, I understand that createAsyncStoragePersister and createSyncStoragePersister create a snapshot of the current queryClient. If I use "staleTime: Infinity" the query will never be called again if I don't invalidate it. That said, is there any property I can set so that the data is always invalidated when the app (React Native) is restarted? Or is doing it manually already good?...

conscious-sapphire

12/8/2022

invalidateQueries function cause to close the modal

Recently i started to use react query to my application in react and i noticed that invalidateQueries function close my modal. I will explain: I have a task list in my app that in every item i attach function to open modal to delete this item. I press the delete button on the modal and run some code in "onSuccess" function without close the modal ,but when it comes to "onSettled" function its run the "invalidateQueries" and dispose the modal from the screen(modalStatus state still set to true). How do I fix it so that it does not cause the model to disappear from the screen?...

rare-sapphire

12/8/2022

Difference between `fetchQuery` and `ensureQueryData`?

The docs for queryClient.ensureQueryData says:

ensureQueryData is an asynchronous function that can be used to get an existing query's cached data. If the query does not exist, queryClient.fetchQuery will be called and its results returned.

But, isn't that what fetchQuery already does kind of? Returns the query data if it's already fetched, and does the fetch if it's not?...

probable-pink

12/8/2022

Reset many queries

Hello, I have queries that are built like the example below:

useQuery(['skills', 'stats'], ...);
useQuery(['badges', 'stats'], ...);

useQuery(['skills', 'stats'], ...);
useQuery(['badges', 'stats'], ...);

...

rare-sapphire

12/7/2022

correct way to call query inside a function

i want a user to be able to sign after they have a clicked a button but i get a hooks error. can anyone help with this?

stormy-gold

12/7/2022

placeholderData with useQuery returned data property type

I am using placeholderData in my query but the type for data returned seems to have undefined still in it. I notice when setting initialData it correctly removes the undefined from the type but with placeholderData it doesn't. I'm guessing this is done for a reason. Can anyone tell me why it could be undefined still with a placeholder set?...

flat-fuchsia

12/6/2022

Is it possibleHow can i use multiple keys for createAsyncStorage ?

Currently i have simple persister implemented for React Native project that uses mmkv storage with PersistedQueryClient. So far it seems to store all react query cache data under single cache key. and single entry. Id like to use multiple because some of the queries are several megabytes of base64 strings which id like to persist. It is realistic to have dozens if not hundred + mb in cache this way and id like to avoid reading all of it at once when getItem gets called. Is there a way to segrega...

genetic-orange

12/6/2022

invalid

Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

fascinating-indigo

12/6/2022

Pagination + Filter + Sort

I'm currently making a forum site and I want to be able to query posts with pagination (so something like useInfiniteQuery so they all don't load at once) but also support filtering the title by text as well as sorting by a certain column. I was wondering if this is possible to do in React Query and would I have to make multiple different API endpoints? (Currently using Prisma on the backend)...

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