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

statutory-emerald

1/24/2024

refreshing access token manually in axios

In my axios API calls, I need to give an Authorization header with the access token -

``
const res = await axios.get(

https://us-east-1.aws.data.mongodb-api.com/app/${process.env.REACT_APP_APP_ID}/endpoint/taskLogs`, {...

flat-fuchsia

1/23/2024

Is there a way to monitor queries from a parent component?

Hello! I'm currently trying to figure out the best way to monitor queries in a parent component that are happening in children components. Consider something like this: ```tsx...

fair-rose

1/23/2024

useInfiniteQuery on TypeScript throw error on queryFn

here is the typescript playgroud: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE84BfOXKCEOAcgAEYBDbVLgYwDWAeijpOfGAFoAjuSosA3AFgAUKEixEcMJygYAwhAgDg6VLXqNmAImxGTZ68rXho8TgA9gEcwyZxrT29UJ1VVGEowdDgcMGQYAHF0GABBABs0gAV0bAATAgBzACV0ADdTAHdUAGUKcr5ogF5EVTg4bHQPGExcgC44XihCuAAfFDz0fA7c5xpnCKi4EtRIHnQk1IzsvMKS8vQq2qh6ppaVNr5kPWh+weGx7GQM5zaonexissr+hFa2uE4qFQwAK2BAORgtxgQw+AG0ALovf58NKA1CMJhQmEFBFItq8ZC5CFYwq4v74mCEiEAdWgAlQJLhiL+NDJKjmqk6GncqEo2D49GQ-Jg3mwcA26SyOX...

exotic-emerald

1/23/2024

Does react-query work with react-native-windows ?

Hi, i am wondering if react-query work with react-native-windows. Its doesn’t write on documentation.

ratty-blush

1/23/2024

What is the best way to prevent a function running after its fetched and not loaded.

I have data that I want to live in short term cache. After initial load, I want to run a function against that data but not run that function if the data is 'fetched' again.

plain-purple

1/23/2024

Deleting Cached Data Programmatically in RTK Query after Mutation

Hello community, I am currently working with RTK Query in my project and facing a challenge that I couldn't find a solution for online. I have two different queries, each fetching different types of data, and both queries have defined tags. My goal is to automatically remove the cached data for both queries after the completion of a deletion mutation. The catch is that the solution using invalidatesTags doesn't work for me because it triggers a refetch of the data. However, the data in my application already has validations/checkers set, and I cannot afford to refresh or lose these states....

correct-apricot

1/22/2024

Any guidance / examples on react-query + handling live websocket events?

Hey react-query community, we're working on an application that will have a live-updating list of items. We are currently using react-query alongside cursor-based pagination + infinite queries to fetch data. However, we want to also integrate with websocket events (new item, delete item, modify item, etc.) so that we don't need to constantly refetch (polling). ...

harsh-harlequin

1/22/2024

Is it possible to skip cache for a hook?

I am try to do something similar to "cache-policy: 'network-only'" that I think existed in the days of apollo Is this possible to achieve with react-query? My case is the following. I have basically a stateful fetcher function that I'm passing to the component. When the component mounts, I want it to always invoke that function so that it gets the new data. And I don't want it to show the data from the previous computation. I cannot pass a unique value to queryKey because the function has no arguments....

unwilling-turquoise

1/22/2024

Framework independent usage

I really like the query library. We have a project where we don't want to put the query layer into the framework that we are using but we would like to have the same functionality that the library provide. Is it possible to use the lib without react or any of the frontend frameworks?

fascinating-indigo

1/21/2024

best practices for conditional fetching with React Query?

Hi everyone, im new to react query and the whole idea of letting it handle server state. I had a question regarding conditional fetching, like for example I would only want my useUser hook to attempt to fetch the user data, if they are authenticated. I'm using Zustand for global auth state, and I add it to my useUser hook like this ```js...

fascinating-indigo

1/21/2024

Does refetch internally call fetch

Hey, have been digging around the src for a bit. I can't seem to find it refetch simply calls fetch. I was wondering if refetch requires that the initial query has been fetched previously or if as long as a query is defined we can call refetch as the initial query call? (I think this is true?)

like-gold

1/21/2024

useMutation invalidateQueries does not trigger either on onSuccess or onSettled

Please is there anything i might be doing wrong because after the successful mutation it doesnt refetch the data ```tsx const { mutate, isPending } = useMutation({ mutationFn: (value: { companyName: string }) => {...

other-emerald

1/21/2024

queryFn won't refetch with new state (it sort of does but not the way i expected)

Okay so here i am trying to basically fetch some data from an api using tanstack query with material UI table pagination which lets me select how many rows of data i want per page. The API i made is able to plug that value to fetch any amount of data using the limit param. Anyway the setter setRowsPerPage in the handleChangeRowsPerPage function works correctly when i select 25 or any other value from the dropdown in the table pagination UI and i can see the console log of the updated state ...

like-gold

1/21/2024

fetchInfiniteQuery doesn’t allow page params

curious how to fetch an infinite query outside of react while supplying page params to be cached.

rare-sapphire

1/20/2024

Query refetches when page is refreshed even if refetchOnMount is false.

I switched to typescript recently. I applied the same configs with my old project to my new project but it is not working like the old one. In the old one projects are not refetched even if I refresh the page so project selection combobox doesn't flicker when page is refreshed but now it is refetching. Note: I was using keepPreviousData: truein my old project but I gues it is deprecated....

rival-black

1/20/2024

I have no idea why this is show as error in V5

Line 53. type any works

optimistic-gold

1/20/2024

How to invalidate a query key for all opened pages?

I use queryClient.invalidateQueries(key) and it invalidates well for the current page window, but I would like it to invalidate all window pages currently open. How to do that?

exotic-emerald

1/19/2024

How does React Query trigger a render?

Hello, I'm trying to track down a possible bug with dependent queries in React Query v4, and timers in Jest. I've encountered a similar issue with Cypress before (https://github.com/TanStack/query/issues/4655). I think the problem is related to React Query's use of timers but I'm still trying to debug. My question is: where in the React Query code does it update its state so that observing components re-render? In useBaseQuery.ts I can see that it calls useState initially to create an Observer (https://github.com/TanStack/query/blob/96cdb28d311772774323c05a75372ed05eedfde8/packages/react-query/src/useBaseQuery.ts#L62) but I don't understand how or where that observer is updated so that it triggers a render when data is returned from the fetch function. I was expecting some sort of call to setState somewhere but I'm not able to find it. In my test I can see that the dependent fetch function fires, and data is returned, but it doesn't look like React Query is then updating the observers....

rival-black

1/19/2024

useMutation onSuccess trying to add new row of data to UI, not working

I am a newbie with this library. Attempting to implement my first useMutation. Everything is working correctly on the backend. Now on the front, I want to reflect the new ingredient that was just added in the table. I read on their site that the usual practice is passing back the newly added entry after adding something, so no extra network calls needed. I am passing the new ingredient back and I can see it in the data. But the ingredients table is not updating. I don't understand react-query enough to understand what variables is or where it is coming from. But I'm thinking one issue or maybe the issue is that the id in variables is blank. Here is my useMutation code: ```js const { mutateAsync: insertIngredientMutation, isLoading } = useMutation({ mutationFn: insertIngredient,...

genetic-orange

1/19/2024

QueryObserver with partial key

Is there a way to subscribe to multiple queries with a partial query key? Say, for example, I have the query keys ['person'] as a meta-key, and then the individual people are stored in the cache with the keys ['person', 'some-id'], ['person, 'other-id']. I want to observer the cache, and get notified any time a person key changes. Is there a way to do that with a QueryObserver or something similar?

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