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

variable-lime

9/5/2023

Always refetching 😫

Am I understanding react query wrong? People have claimed it to be a substitute for redux. I have a simple NextJS application with two routes. When switching between the routes query always refetches data. Also on my pagination implementation as well as the official example. React query always refetches data on page change whether it is a previous page or not....

page_switch_example

other-emerald

9/3/2023

one query depending on another

Hi, i have a situation where my useItem query depends on my useFormOptions query, and sometimes useItem finishes fetching before useFormOptions. What would be the correct way to always prefetch form options (or fetch if stale) before actually fetching item?...

plain-purple

9/1/2023

Stuck with Cache

Hey guys I am new to react query and trying to implement a cache when we access the data if we do not have no internet. Thanks in advance

ratty-blush

9/1/2023

How to work with rotating auth tokens? (Clerk)

I have a React context, that wraps my entire application. In this context, I have implemented a useQuery hook that fetches some global settings data for my application. However, updating other things in my application has the potential to invalidate the cache that this call has, and so, it will need to be refetched (which happens automatically, since we are dealing with a global context). Here is what I think might be problem. I think useQuery might be caching (?) the auth token that is passed to my backend in the call?...

other-emerald

9/1/2023

new QueryClient instantiated in a function component

Hi, so I want to trigger toasts on errors, and the toasts can only be controlled through hooks. In this case, instead of instantiating the query client globally, I made a wrapper rq provider which has access to the toast provider: ``` export const RQClientProvider = ({ children, }: {...

dependent-tan

9/1/2023

cacheTime, maxAge and persistence

So my case is that for most of the queries I use, I want them to be persisted in storage forever. To achieve that, I set maxAge: Infinity in persister and cacheTime: Infinity in default query options, following the documentation. It all works. However, there are some queries which I don't want to be persisted forever and I would like them to be garbage collected after, let's say, 10 minutes of inactivity. If I unsubscribe from such query and app is running for the next 10 minutes, it all works as expected. Query is removed from cache and it will not be persisted. But, if the app gets killed/closed after unsubscribing from the query, but before 10 minutes, the query will stay in the cache and it will be persisted. So when I open app again, after hydration query will be there with the cacheTime: Infinity from defaults, and it will basically stay in the cache forever if I never subscribe to it again. Is there any way it can be solved? So if unsubscribe from this query, kill the app after 2 minutes and then open it again after an hour, the query won't get hydrated?...

stormy-gold

9/1/2023

Invalidating Queries doesn't send a request

I'm using TRPC, which is using react-query. For some reason getWebsites does not invalidate when invalidate is called. TRPC's invalidate is using queryClient.invalidateQueries I have the following code snippet: ```ts const websites = trpc.website.getWebsites.useQuery(undefined, {...

wee-brown

8/31/2023

simple useQuery is forever loading...

``` const { data, isLoading, isError, error, status } = useQuery( ["sheesh"], () => { return { hello: "heyyy" }; }...

fascinating-indigo

8/31/2023

How to access previous data of query?

Someone that knows any best practices regarding how to manage optimistic updates and query cache with Tanstack Query? I have a mutation and onSuccess of that mutation I trigger a function called updateQueryStateOnSuccess. (Where I want to update the cache for a certain query directly so I don't have to wait for it to be updated next time I fetch it) My prevData is always undefined currently which is my main issue....

exotic-emerald

8/30/2023

Request not being cached

Hi, I have a request for a JSON that is stored on the public folder of my nextjs 11 app, but it is not being cached. I am using it with axios, did I make anything wrong? ```ts import axios from 'axios' import { useQuery } from '@tanstack/react-query'...

national-gold

8/30/2023

How to use hooks in react-query global onError handler

Is there any way to use hook in onError handler since the queryClient is outside of a Component? For example how i could open a Modal or a Notification component....

vicious-gold

8/30/2023

React query calling api each time and not caching

Hi ! I don't understand why react query not caching the data . I am trying to loop though array inside filter component. to show select fields and to fetch those selectiing items data for different fields I am using react-query. ``` {filterableColumn...

exotic-emerald

8/29/2023

TS best practice with `enabled` prop

Hi guys, basically I have an custom useQuery hook with an underlying queryFn that requires certain arguments. Now TS yells at me, because the type checker doesn't know that the query won't get enabled/executed until isValid=true . How do you guys handle this situation? I'd love to hear your opinion on this approach....

exotic-emerald

8/29/2023

Running query being cancelled for no discernible reason

The situation I have a list of documents, which is fetched using useInfiniteQuery, on the page /documents/[category] with the query key ["documents", category]. Each document can be opened and edited on the page /document/[id] with the query key ["document", id]. After being edited, the document's query cache ["document", id] and any query caches matching the key ["documents"] that contain that document are invalidated. The issue ...

continuing-cyan

8/28/2023

Managing Consistent Favorited State Across Paginated Searches with React Query

I have the following scenario: I have a search page with filters that queries for a list of companies (based on filters). This means I have a cache entry for a list of company results. Now user can mark a single or multiple companies as "favorites". This means I have to update the cache for the current page, but previous pages (cache entries) that the user searched for might also contain the same company. For example, a user can search and get a list of companies including Apple. Then do a different search and get Apple again, then mark it as favorite....

national-gold

8/28/2023

How to use react-query for a request with filters

I have created a small example in codeSandBox. (https://codesandbox.io/s/loving-tamas-lxprg4?file=/src/App.js) I want to use react-query in order to fetch data based on filters. In the example, there are two components the <Filters/> where the filters and the search button, and the <DisplayData/> where the fetched data is going to be displayed. The inputs in <Filters/> are controlled and my problem is that I can't find a solution without using two different states for the same values (filters)....

broad-brown

8/27/2023

TS errors using ColumnMeta - All declarations of 'ColumnMeta' must have identical type parameters

What do I put in the ColumnMeta interface to fix the error? ``` declare module '@tanstack/table-core' { interface ColumnMeta<PartialContact extends RowData, TValue> { columnName: string...

sensitive-blue

8/26/2023

Using component function names in query keys?

We're noticing that text-based query keys are easy to overlook or lead to human error since we can't lint them. Because our components are very clearly named like LogReadingsMainGrid I was thinking maybe we can use the function name. So instead of typing useQuery(['logReadingsMainGrid', id], ... we can use useQuery([LogReadingsMainGrid.name, id], ... where LogReadingsMainGrid is the component function name. In my tests this works fine and linters can catch if a developer copies this code into a new component and forgets to change it. However I'm wondering there's a reason not to do this that I'm not seeing....

stormy-gold

8/25/2023

fetch at the same time + expired token issue

I have several useQuery, which are all set to be fetched every 10 mins, and only fetch when there is a token and the token is valid. The token is always set to expired every 10 mins. When the token not valid, we got 401 status code then we refresh the token. So now the issue is that I found they all call at the same time, so my "fetch token" function is called too many times (at the same time). So, what is the best way to just got one of the token call? So ideally I should get one 401, it replaces the token immediately, instead of having all the endpoints calling and replacing token several times in a split of second?...

magic-amber

8/25/2023

Referential stability of the mutation object

The useMutation hook consistently returns properties with stable references, however, the hook itself produces a new object with each use. As a result, directly including the entire mutation object in dependency arrays can be problematic. Is this design a deliberate prompt to encourage developers to only add the specific properties they require to their dependency arrays (thus adhering to best practices)?

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