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

eastern-cyan

8/20/2023

React-query for session management

Hello all, a while back there was a ticket about next-auth not working properly with react-query(suspense mode), however I really like the way it handles session as for example if you are logged in tab one and open another tab(2) once you are logged out in one it logs you out on all of them, is this behavior something possible with react-query, I was messing around and thought maybe using some stale time or window refocus would be possible, my inital thought would be something like this, you w...

stormy-gold

8/19/2023

initialData doesn't work

I tried to make code using initialData, but none of the output comes out even the key doesn't appear in react-query-dev-tool

metropolitan-bronze

8/18/2023

Type Cached Data

Does react-query support defining type for the cached data? So that wherever we fetch or use setQueryData, the type of a specific queryKey is enforced?

genetic-orange

8/18/2023

select option, getting type errors.

how to fix this it should automatically get from react query No ? with out callback its working

fair-rose

8/18/2023

how to update query state from websocket?

I receive a new object via websockets that I need to add to the offline state. I tried to do this using setQueryData, but sometimes oldData is undefined, even though the data has already been loaded in useQuery. Can you suggest what I might be doing wrong? Perhaps I should use a different method? Example usage in a component:...

metropolitan-bronze

8/17/2023

Mutation status polling

Consider the following scenario. User clicks a button (mutation) and this kicks off a job in the background. I then need to poll a status endpoint for a success response. Technically the mutation isn’t done until I receive the response or an error. What is the recommended approach to handle this situation in react-query?...

eastern-cyan

8/17/2023

Dependent query best-practices

We're curious if there is a preferred method of invalidating dependent queries, as my coworker and I took two different approaches based on our understanding of the documentation. We have two queries both wrapped in hooks, one called favorites and the other offers. The favorites data is an array of items the user can add or remove from, whereas the offers data is generated by the backend based on the items the user adds to their favorites. The desired functionality is that when a user adds or removes a favorite, the offers data is refetched....

ratty-blush

8/16/2023

Help integrating react query

I'm trying to integrate react-query into my React application for data fetching. After setting up QueryClient and wrapping my app inside QueryClientProvider, my the pages wrapped crashes, and it seems I might have an issue with how I've integrated the library. //more code than you have provided. can somebody help me get me up and running? import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query' function App() {...

other-emerald

8/16/2023

Websockets & queryClient.setQueryData

Hello everyone, new dev, new to React Query. I am currently using React Query to fetch some initial data from an API, and then, with the help of TkDodo's blog post (https://tkdodo.eu/blog/using-web-sockets-with-react-query) I attempted to update the said data using setQueryData with no success. Before I show you the code, I have a large object that the DOM maps through it twice and renders it to the user. Then the websockets come in and send data to be updated to an individual key in the said object, so I have (& know is not efficient) a function that handles said data and creates a new updated entity object (to be replaced/updated with setQueryData....

correct-apricot

8/16/2023

useInfiniteQueries ?

We have been using useQueries for executing mulitple queries required to fetch data. We need to support cursor based pagition which is supported by useInfiniteQuery. However, there isn't an equivalent useInfiniteQueries. Are there plans to build one? or any workaround ?

conscious-sapphire

8/16/2023

Cancel Axios POST request using useQuery + source.token

I'm in the process of migrate our old way of fetching data to RQ and I'm having issues when I'm trying to cancel the previous/duplicate request using the CancelToken from Axios. I'm applying the same solution/code than the docs and even we use the same way in our previous implementations but it doesn't work with RQ as expected. Is there any known issue regarding this two tools. I've checked on Stack Overflow and those answer didn't feet my system's necessities. ``` ... queryFn: () => {...

metropolitan-bronze

8/16/2023

useQuery refetch

Hello everyone, I have a react native with typescript using zustand and react-query latest version. I have a question that I have zustand store to keep my filters object, if it changes, I want to make the useQuery to get the latest data with the filters. Here's the code:...

xenial-black

8/15/2023

Pass different parameter to query fn depending on how it is used

Hello all, I have the following case: I have a react native app that needs to make a network request the first time the app opens and every time the app comes from background to foreground. It is also invalidated at times throughout the lifetime of the app. ...

genetic-orange

8/14/2023

Could someone explain onSuccess like I was five?

I just don't seem to get this to work logically and can't find an example to explain this properly either. So I have an async function that looks like this: ``` export const deleteApiContent = async (url: string): Promise<HttpStatusResponse | void> => {...

fascinating-indigo

8/14/2023

does `ensureQueryData()` respect `staleTime` or is it only concerned with cached data?

I'm having a heck of a time trying to figure out how to use the local storage persister. it does not behave the way i expect and i can't make sense of it.

quickest-silver

8/14/2023

Is there any sane way to do conditional dependent requests?

I have a series of requests that I want to call conditionally based on data of previous requests and enrich payload of the first one With promises I would write it like that ```ts const fooData = await getFoo();...

adverse-sapphire

8/13/2023

Update data from polling only when the data changes

I have react query hook with refetchInterval of 5s I want the query.data to be updated only if the new data has actually changed. How can I achieve it? Further explanation about the usage: I have 2 react query hooks, one that happens once, when the app is loaded, the second one is polling every x seconds....

generous-apricot

8/12/2023

How to fetch useMutation like useQuery on mount (without having to call mutate in useEffect)?

Calling mutate in useEffect makes the call to the BE twice (because of react strict mode) and does two mutations, which is a no go. An option would be to use useQuery intead of useMutation for this mutation, but that's probably a wrong approach....

conscious-sapphire

8/11/2023

enabled not working on testing

I am trying to test a component that relies on a useQuery hook. For other tests this works fine, however for the component that has the enabled flag set I don't get any data from the useQuery hook and also isLoading stays true. The strange thing is that when I log the enabled value it is logged as true but the test doesn't pass. If I however uncomment the enabled flag my test passes 🤷🏼‍♂️...

metropolitan-bronze

8/10/2023

Enable query on click and get updated data in same function

https://codesandbox.io/s/naughty-pond-99n99s?file=/src/App.tsx

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