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

absent-sapphire

6/8/2023

reusing useQuery

I have a general hook that uses useQuery to fetch some data. I had a new use case in which i want to access the data returned from this query in a different place in my code. I want to avoid using queryClient.getQueryData as it will not trigger a refresh when the data changes. So i tried calling the query like this useQuery([key])...

unwilling-turquoise

6/7/2023

Provider in Server Component?

hello, I'm a junior developer and I am a newbie with react-query. does it make sense to wrap the root component '/' in next.js, which is a server component with a QueryClientProvider? If not, how would you decide where to wrap the application with the Provider? I assume it is good pattern to use only one provider per application? sorry, I could not find clear answers to these questions....

other-emerald

6/6/2023

Wrong data type when use with Query Key Factory

Hi everyone, I'm using React Query (React v5) + Query Key Factory + Typescript I have created query keys with queryFn already, which's returning a promise of array, but when I try to get data (query.data) it's giving me an object, so my linter is complaining about it. ...

adverse-sapphire

6/6/2023

Can I use custom QueryCache with react-query?

Hi, I have an application where I buffer (cache) data into in-memory cache periodically. The cache structure is nested object which is optimized to read data efficiently. I have BufferManager class to manage writing and reading of cache and BufferClient to handle data fetching logic. The app is similar to hls video player, but instead of buffering video frames, I buffer json objects in order to draw them on canvas. Can I use my custom BufferManager as QueryCache so that I can use react-query to handle data fetching? For example, I want use useInfiniteQuery ...

fascinating-indigo

6/6/2023

Updating mutation data from another mutation

Hi 🙂 I work on an app that heavily relies on outputs from LLMs, and as such we prefer using useMutation to fetch text generations which are not stored in a database. The main reason we can't use useQuery is that we can't allow requests to fire unintentionally. We tried using it, but had to turn off refetch and retry, set cacheTime and staleTime to 0 and set enable: false but there could still be a chance that a dependency is updated and another request is triggered which is bad for us. All the requests are triggered by user interactions. ...

foreign-sapphire

6/5/2023

Watching changes

Hey guys... I have a query that store some data for filters example: {...

conscious-sapphire

6/5/2023

How to get mutationKey in onError?

Hi, in my global ReactQueryClientProvider I try to have global error handling for mutations by setting the MutationCache. ``` const mutationCache = new MutationCache({ onError: (error, _variables, _context, mutation) => { ...

passive-yellow

6/5/2023

[V3] createAsyncStoragePersistor with local forage or idb-keyval

Has anyone already attempted this in v3, I wanted to change to an indexed db because i have been running into storage limits using local storage

continuing-cyan

6/5/2023

Any way to use react-query without use 'use client' in layout.tsx in nestjs

``` 'use client' import { Metadata } from 'next' import './globals.css' import './variables.module.scss'...

absent-sapphire

6/4/2023

Custom hook to handle multiple queries/mutation combined by domain e.g. useCart

So I am refactoring a code in a project and I decided to dive with React Query. One Approach I tried to use is to combine all of the queries into a single hook useCart. I thought that this would be a good idea as it will basically help me have a shared isLoading state amongst other things for the cart itself and all mutations related to it. I still dont know if its a good idea to approach it like this, but the problem that I have encountered is that isLoading isnt really working. ```ts export const useCartRq = () => {...

passive-yellow

6/2/2023

Chatbot with React Query - does it make sense?

Hey folks! I am building a chatbot feature in my application and I was wondering if it makes sense to use React Query for that? The flow will look something like this: - main app calls the /initialise endpoint with the user id and some additional data - chatbot api passes back a session id - for the remainder of the session main app calls the /transactions endpoint with the session id and the text input - as a response, it receives plain text answer and some additional data, basically the guides for next possible question/action...

optimistic-gold

6/1/2023

Multiple mutations, one notification

Hello World! Imagine you have to do 3 mutations (they are not dependent on each other) and you have to display only one success notification if all mutations were OK, and one error notification specifying which mutation failed. Any idea? Thanks in advance. 🙂 (TanStack Query v4 for React)

deep-jade

5/31/2023

onlineManager (cannot detect going offline when I mock in DevTools)

onlineManager only logs { online: true }, no matter what happens and cannot detect going offline when I mock in DevTools. I'm using "@tanstack/react-query": "^4.29.7" version. I attached an image when I tried to mock the devtools into offline. What did I miss here? Thanks. ```ts const [isOnline, setIsOnline] = useState(onlineManager.isOnline()) useEffect(...

flat-fuchsia

5/30/2023

How do I write out my cached data locally and update it every 30 days from the server via fetch ...

I need to fetch data from a server, store it locally "by writing out the cache", and update it every 30 days. This needs to be done in JS and React CLIENT side. I don't want to create any servers or anything like that. I don't even know where I'm going to host this app. Basically, I only want to hit the server once every 30 days and use the local json file the other 29 days. Sample Fetch URL : https://pokeapi.co/api/v2/pokemon-species?limit=1...

environmental-rose

5/30/2023

Query invalidation -- how to invalidate [x, y, z]

I have queryKey [x,y,z] and I want to invalidate y such that [x,y,z] gets invalidated. Will queryClient.invalidateQueries([y]) do this? What will?

flat-fuchsia

5/30/2023

Does Date objects in keys are treated as equal if they have different references but the same time?

I thought that it only treats as equal primitives with the same value or objects with the same reference. But it seems that it does toString() or json.stringify for Date objects to compare or something like this. Is it correct?

adverse-sapphire

5/30/2023

Tests failing when using react-query-devtools

I am getting this error while I am trying to test a file where I am also using the ReactQueryDevtools in the provider. As I checked the dependency, the error (see attached ss) I am getting on this package is-what is from react-query-devtools package ```...

genetic-orange

5/29/2023

react query cached and not up to date

Hi, I'm using tan stack query for authentication api calling React router dom for routing So basically in my auth route I'm logging as a user I'm using use Mutation for calling login api endpoint then redirects to the homepage route which I have a loader calls the api before component load and verify the user credentials with useQuery. Problem appears if Im deleting credentials it redirects to login page and loggin again with right info the query is still cached with old data. With invalidateQueries isnt working. It only works if I'm refreshing the page again. NOTE query created in the loader function...

fair-rose

5/26/2023

v5: Other Helpers e.g queryOptions

I've recently started to use react-query a bit more and am looking forward to the v5 release! I was wondering if there's any plans for a infiniteQueryOptions and mutationOptions helper similar to the newly introduced queryOptions helper?

equal-aqua

5/26/2023

React Native tests fail: `require(...).unstable_batchedUpdates` is not a function

Hi there! After migrating to react-query v4, our React Native tests fail in CI environment with following error:

``
ReferenceError: You are trying to

import` a file after the Jest environment has been torn down. From ... at unstable_batchedUpdates (node_modules/react-native/Libraries/ReactNative/RendererImplementation.js:44:10) at batchNotifyFn (node_modules/@tanstack/query-core/src/notifyManager.ts:61:9)...

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