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

exotic-emerald

5/1/2023

Error: No QueryClient set, use QueryClientProvider to set one

I have a library where I am using react query and that library I am consuming in my app. I have set the query client in my app but it gives me error that no queryClient has been set useGetFeaturePermission is in my library...

extended-salmon

4/30/2023

Return type of refetch includes loading states

👋 working with the refetch function returned by useQuery and noticed that the Promise data returned is a full QueryObserverResult, including loading states. Unless I'm missing something, I'd intuitively expect this to only return error or success states since, by the time the refetch Promise is resolved, the query should have finished loading. This has the tangible effects of status including the loading state as well as data including undefined in the union with TData - not a huge deal, but does feel a bit unintuitive. Is there a reason for this? There's a good chance I'm missing something obvious here 😅 just wanted to check before raising a formal issue / PR. Thanks!...

environmental-rose

4/30/2023

When I call resetQueries, I would expect all my `suspense` queries to go into a suspense state.

Is there anyway to reset the queries so they enter a suspense state?

rising-crimson

4/28/2023

I want click even of each row how can I do that ?

I am using tanstack table to display data from api.. I want to implement click event of each row so I can navigate user to another page?/ how to do that >> any idea ??...

other-emerald

4/27/2023

Query keeping cached data when api returns error on invalidate

Lets say I have a page which is displaying data from an API, a list of cars! I'm deleting manually every single car from this api by mutating and then onSuccess I'm invalidating the key of the api above (cars) to get the updated data. The error is, when I delete all cars and invalidate the query, the api return error, but the query is keeping the old data on cache. How can I clear cache when Query call get error?...

typical-coral

4/27/2023

Use of indexeddb store to keep the cache data

Hello folks, I'm going through docs and learning about cache so let me know if there is anything wrong I'm doing here. I have an application that fetches API for whole inventory data. once it's fetched instead of keeping it in memory I want to store that in indexeddb as data can go pretty big and next time when the user again routes to the inventory page I want to show data from indexeddb while in the background it calls api for new data. show new data to ui and update in indexeddb again for next time. Current implementation: https://codesandbox.io/s/react-query-cache-4xx8qp....

optimistic-gold

4/27/2023

reset query with `keepPreviousData` to `isLoading` when query-key changes

Hey there, maybe I'm totally handling this wrong but I tinkered with this problem quite a bit now and can't get to the solution. Maybe it's even a bug?! I created this sandbox to illustrate my problem https://codesandbox.io/p/sandbox/reactquery-with-keeppreviousdata-6eg4bp?file=%2Fsrc%2Findex.jsx...

fair-rose

4/26/2023

Should access token be included in query key?

I'm calling a third party api requiring an access token. The precise endpoint I'm hitting is uniquely identified by a resource id, so I include that id in the query key. ```javascript useQuery({...

correct-apricot

4/26/2023

`setQueryData()` successful but not triggering update in `useQuery()`

Hi all. Question: can anyone think of a reason that setQueryData() would successfully update the cache, but useQuery() with a matching query key doesn't update? This is using v3. Works in the app, but fails specifically in tests. Using msw to mock responses, and that part is working because the cache gets updated. Just useQuery() doesn't update.

harsh-harlequin

4/26/2023

How to co-work with Redux dispatch under "Search" scenario with useQuery?

Hi , In my app, one param of API exists "keywords" for filtering, user can type something in the search box ( already considers debounce). Code for fetch like below, will dispatch data to store (Redux) after fetch success:...

sensitive-blue

4/26/2023

Get a specific mutation based on filters or predicate

I would like to retrieve specific in-flight mutations. I guess I have to do something like queryClient.getMutationCache().getAll().filter( callback )? And in the callback remember to filter by isLoading/isPending as well as the actual predicate I want to match mutations against. queryClient.isMutating allows you to supply a callback to filter the existing mutations, and returns the number of matching mutations which are currently pending (is that correct?). Is there a reason isMutating returns a number instead of an array of in-flight mutations matching the filters? You can always do array.length if you need the number anyway....

fair-rose

4/26/2023

Invalidate inactive query not working

I'm using a sidesheet to add/edit some data. If the sidesheet is mounted with an ID, I'm using react query to fetch data based on the id. After closing the sidesheet, it is unmounted and I invalidate the query by its queryKey + id and it turns to inactive because the sidesheet is unmounted and no one is listening to it. So far so good, but when I immediately open the sidesheet again, the query is marked as fresh and shows the old data from cache. After the stale time, the data gets marked as sta...

stormy-gold

4/25/2023

Passing parameters to refetch without specifying it in the querykey

I have a situation where I want to pass a parameter to refetch, but not specify it as a queryKey. The parameter is a complex object that cannot directly be used as a queryKey for various reasons. One of them being that this parameter can have different contents, yet actually be the same value. So I have a function that generates a queryKey for the parameter. So I would like to call refetch, pass the computed queryKey and the actual parameter itself. But how can I do that? I don't want the actual parameter to become part of the queryKey...

stormy-gold

4/25/2023

How to use both invalidateQuery and refetchInterval?

So previously I have used invalidateQueries for useMutation when I make changes, so component A update will reflexed in component B. However, due to some request I need to changed to new refetch strategy such as refetchInterval: 1000 * 60 * 10, now I found this is in conflict with invalidateQuery, as if the component A changes, for a split second it will display the new change, but it soon reverts back to the old data, unless you refresh the page. Is it possible to "overwrite" the refetch by h...

xenial-black

4/25/2023

How to best save the data I get from an useMutation to later use.

Ok so I getting some data from an useMutation and I'm thinking on storing this data inside an React.Context provider to later use through my application, but maybe I don't need to do this since I could queryClient.setQueryData but I'm not too sure about this? I have the following mutation that I use on one of my components ```ts...

probable-pink

4/25/2023

Using MutationCache to determine if a mutation function should run

I am trying to define a mutationKey in a useMutation hook and use the mutationCache to determine if a mutation has ran before. However, it is not working the way I expect it to work whenever the key changes due to the useMutation never unmounted. I am wondering if there is a better way to do this. This hook is used everywhere in the app so it has to work "globally". Thanks! ```jsx const useMutationTrack = (key: string) => { const queryClient = useQueryClient()...

flat-fuchsia

4/24/2023

Where should I put invalidateQueries when I want to refresh a page after a form update?

My views open a form for data updates and I'd like the update the page asap when user saves the form but should I have the invalidateQueries in the form code or in the callback in the view? I have tried both but neither seems to work so probably I don't get something. My understanding of the documentation is that it shouldn't even matter but what is the preferred way?...

solid-orange

4/24/2023

mutationFn context?

Hi, I was wondering if there was a reason that the mutation context is not exposed in the mutationFn (as it is in the queryFn)?

ratty-blush

4/23/2023

after mutation update Query data by using setQueryData for paginated Queries

I am wondering how to update the paginated query data after mutation? Since paginated queries can have a long key, so you need to go through all the different query keys to find the exact query. How do you solve this problem? for example, a paginated query can have a key like this: ["movies", 1, 10], the "1" means first page and the "10" means each page has 10 entries. How do you solve this problem?...

ratty-blush

4/23/2023

Cache manipulation with paginated data

I am wondering what is the best approach for the following case: I have a chat where messages are retrieved using useInfiniteQuery, so in a paginated fashion. Besides the REST API there is also a websocket. When receiving new messages over the websocket, what is the best way of placing them in the cache ? The problem I'm running into is that at some point the pages get out of sync. For example if I just append new messages to the first page. As soon as the cache expires react query updates the pages page by page. So the new first page gets loaded, and now temporarily some messages are displayed twice or missing....

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