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

xenial-black

5/10/2023

how would you do this without the useQuery's onSuccess callback?

I'm using useQuery to fetch data for a table. The row data has a category field. I want to add a filter so the user can toggle the display of rows in certain categories. Prior to this major change talk i would reach for the onSuccess to set some filter state. ```tsx onSuccess: (data) => { const categoryState: Record<string, boolean> = {}...

foreign-sapphire

5/9/2023

auto get Error ?

i have this code useQuery automatically getting type whatever m passing in axios type but i want to add Error type on all axios call that should get in use Query like so <IFetchResponse<Game>, Error> but instead of typing manually it should take automatically

adverse-sapphire

5/9/2023

Looking for advice on how to debug intermittent bug related to query invalidation

I have a React app that needs to refresh queries when events happen on the server. When the app receives a server event (events are sent using Pusher), it invalidates the relevant queries. Sometimes, this works great and all queries are refreshed properly. However, sometimes there are queries that do not refresh properly. When this happens, I observe a disconnect with what seems to have been fetched vs. what is stored in the react query cache (based on what the react query debugger displays). One place where I see this most often is on a screen which displays both an infinite scroll list, along with a count. To generate these, we do two separate queries - one for the list and one for the count. I observe that the count (which we get from useQuery, not useInfiniteQuery) always seems correct, but the infinite scroll list may not display the most recent data after the server event. I do see in the logs that react query has triggered the queryFn, which does returns the correct data. However, what is displayed in the react query devtools is still the old data, even though the Last Updated reflects that it has been updated....

deep-jade

5/9/2023

Awaiting data with Suspense in Next?

Hello I have maybe a simple question, I've been using react-query for a while, but maybe missing something simple. I am trying to use Suspense like this and I get the error form the image

xenophobic-harlequin

5/9/2023

What's a robust way to define a dependent query when using `useQueries`?

I would like to use useQueries for parallel queries that are based on a dependent list of unknown length. Normally dependent queries would use the enabled option to specify whether or not the prerequisite data is ready to allow the query to run, but that's not an option at the top level for useQueries. I saw on the github forums that you can pass an empty array to it to have it do a no-op but my concern with that is that the not yet loaded state then looks identical to an empty list respon...

stormy-gold

5/7/2023

Ho to enhance previous response. Now that the on success is not accessible.

I have some data that i get as an array and want to transform and save in the below format. ```ts { posts: { 'id1: {...},...

foreign-sapphire

5/7/2023

select propType in Typescript?

kindly can u guide whats the type of this select prop ? its showing any

flat-fuchsia

5/6/2023

After mutation InvalidateQueries Doesn't work

```tsx const { mutate: onAdd } = useMutation(createPost, { onSuccess: async () => { await queryClient.invalidateQueries([QueryKeys.posts]); await queryClient.invalidateQueries([QueryKeys.myPostsList]);...

absent-sapphire

5/5/2023

Problems with comments and posts. Help!

Hello! I'm dealing with a problem and i would really be grateful with any help. I'm building a king of Instagram clone, and i want to show the comments of each post based on the post cod. But React Query only returns the comments of the last post, and the previous ones are returning undefined. Is this a cache problem? Is renewing the cache after every request?...

typical-coral

5/5/2023

What is the purpose of having `cacheTime` set to a higher value than `staleTime`?

When configuring options for a query (or globally), the cacheTime value controls how long data is kept in the in-memory cache before being garbage collected. The staleTime value controls how long cached data is considered fresh. Once this time expires, any requests will data will trigger a new fetch. By default, cacheTime is set to 5 minutes, and staleTime is set to 0 (meaning cached data is never fresh). It seems like this configuration (or any configuration where cacheTime > staleTime) is kind of pointless. Why would you keep data persisted in the cache that you know is stale? Is there some scenario where having known-stale data provides a benefit over having the cache entry for that value be null? Conversely, it also seems pointless to have cacheTime < staleTime, since in that scenario would result in cache misses for "fresh" data that had been garbage collected....

manual-pink

5/4/2023

Errors during the build process on vercel

Today around the same time Vercel was doing their new "ship" event. I started getting build errors regarding react query. The errors looked something like this. ``` TypeError: Cannot read properties of null (reading 'useEffect') at exports.useEffect (/vercel/path0/node_modules/react/cjs/react.production.min.js:24:292)...

skilled-lime

5/4/2023

I'm getting this error when i try to configure React Query in Next JS

TypeError: Cannot read properties of null (reading 'useEffect') i'm not using appDir...

loud-coral

5/4/2023

Create and Get Queries outside of components

I'd like to setup and retrieve the query object that useQuery provides outside of a component. I saw that I can use the setDefaultQuery-Fn from my queryClient. What can I to call to retrieve that object? More context:...

frail-apricot

5/4/2023

Only fetch on "initial" load

I'd like to know what is the best approach to initially fetch data every time the app "starts" (so whenever the user either visits or refreshes the app). I'm using PersistQueryClientProvider to cache data to local storage, so in case the initial new fetch fails, I still have a back-up. I've added cacheTime: Infinity and staleTime: Infinity to the UseQueryOptions of the specific fetch, however, now it only initially fetches once and then never again. Thus I feel I have to invalidate the query (make it stale) whenever the app closes or perhaps when it initially loads. Not sure what is the best approach here....

deep-jade

5/4/2023

Newbie needs advice on how to structure query keys in this type of application

I've been asked at work to look into using React Query to simplify, decouple and generally improve a part of our application. I'm looking for someone to help me bounce some ideas around with how to best implement React Query in this specific use case or to determine if React Query might not be the best solution for this usecase. The application A grid based scheduling software where the "X-axis" contains cells for every date in a date range chosen by the user. The range can be up to a year long. Because of the potentially large timespan we only fetch data for the "visible" (visible dates + a few days) part of the schedule and defer fetching more until the user scrolls the page horizontally to reveal more dates. Today we refetch all the data when a user scrolls horizontally, even if only one more date became visible, which works but is not really effective because of the size of the schedule for many users. Every row in the grid represents the people that will be scheduled. So a large company might have a few hundred rows....

optimistic-gold

5/3/2023

fetchStatus stuck in paused

Hi everyone! I'm currently experiencing something weird with useQuery, just yesterday it was working fine but today it seems to be stuck in paused mode and the queryFn is not being fired UPDATE:...

rival-black

5/3/2023

Is there a `useIsFetching` for all queries within a specific component and its children?

I have a web app that is a dashboard with several different tabs a user can navigate to. Each tab has its own content to load. Each tab is its own component and they all use React query to fetch their desired data. Each tab is a component itself. I want to track the counts of queries running that were intiiated within those components....

ambitious-aqua

5/3/2023

Having difficult using useQuery with generics

Hi everyone, I'm pretty new to Typescript and I'm trying to get generics working with @tanstack/react-query useQuery hook. At the moment I have a hook which has a generic which is passed to the useQuery, however, I'm getting a weird type error related to the "queryKey" property....

harsh-harlequin

5/2/2023

Undefined data returned from useQuery hook

Hello friends! I am trying to get some users from my back end but I get undefined instead. Here is the code : ```javascript...

flat-fuchsia

5/2/2023

Does `useMutation().mutate()` batch calls to `onSuccess`?

I have an array of persons I want to create in some kind of API using a POST request. Unfortunately my Backend only exposes a singular create-person endpoint. So I loop over this array and create a bucket of Promises using the mutations returned from useMutation() - they are all the same call in the end. I add a onSuccess callback. The code looks something like this: ```ts...

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