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

foreign-sapphire

12/7/2023

V5: Using useSuspenseQueries with enabled = false

I've seen some comments here and there about how enabled is not supported by useSuspenseQuery (though nothing is documented in migration guide). I was wondering how one might migrate from using useQueries with suspense=true, and some queries being conditional to the new useSuspenseQueries. V4 ```...

conscious-sapphire

12/7/2023

separated function cannot be added as a queryFunction

Hello! I currently have the problem that my separate function that makes the API call is not declared as queryFunction. The function: ```...

strange-plum

12/7/2023

Help needed in Nextjs API + react-query rejection handling approach

Hello there! For starters I'm using nextjs@14.0.3 + react-query v5 and im using the Pages routes not the app folder. In one page i'm using react-query to fetch some data ...

wise-white

12/7/2023

Best way to handle monorepo imports?

Let's say I have 3 packages A (app) B (lib) C (ui)...

optimistic-gold

12/7/2023

Query does not retry on fail

I have the following setup and query. I am trying to fetch data every 30 seconds. If the fetch fails, I want it to retry every 60 seconds with exponential backoff which caps off at 10 minutes. The refetch on success (refetchInterval) is working fine, it is just the retryDelay that isn't working. ``` const queryClient = new QueryClient({ defaultOptions: {...

correct-apricot

12/6/2023

How to refetch data from new API? Returns previous value

Hi, i want achieve scenario: User select value => selected value passed to QueryClient => updated value from QueryClient used to refetch data (new value used for api call) Component, which sets initial data ```jsx...

absent-sapphire

12/6/2023

Keep error state when doing background refetch

Hi, currently the query behaves like so that when it's current state is error state it will trigger hard loading state on next network call and clear errors. On the other hand when there is success the hard loading is not triggered. Can I somehow achieve the same thing for errors?...

sensitive-blue

12/5/2023

mapping through data

Do i have to use a set state variable to map through or why can i not direclty map through data?

continuing-cyan

12/5/2023

can you use a useQuery as a queryFn?

I am debating between making a new api or just using the cashe of another and filtering the results. Is it possible to use a useQuery within a useQuery?

afraid-scarlet

12/5/2023

Declaring dependencies and auto-invalidating

To keep my components cleared of query logic, passing around query keys to child components and/or bubbling them up to parents, I'd ideally like to simply declare a relation/dependency somewhere. So that when api/entities/registration is posted to, api/entities/ and api/entity-types/ gets invalidated automatically. E.g. you have a list view with a create button, which opens up a child component that adds something to said list through the backend, meaning you'd want to invalidate the list's query-key at that on-submit point via the child's onSuccess mutation. As far as I know, you'd pass the list's querykey to the child or have a callback onSubmit exposed from the child that the parent provides, meaning one of them still has to get the QueryClient and then call its invalidate along with the appropriate key. Since I have many different pages doing the same logic, just to different entity-types, I'd ideally just not have any of the invalidation and querykey-management logic in those components. Any tips?...

fascinating-indigo

12/5/2023

React Query V5 infinite loop when using useEffect

Hi, I tried to migrate React query from V4 to V5 and I struggled to find a solution for this one. I removed the onSuccess callback for the useQuery methods and instead, use a classic useEffect...

fair-rose

12/5/2023

Query not being invalidated

```js const key = 'paginatedListings' //Query const { data, isLoading, isError, error } = useQuery({...

extended-salmon

12/5/2023

Best practice for selecting a value from a useQuery that returns array

I have a query that returns an array of groups called useGroups ```ts export const groupQuery = queryOptions({...

stormy-gold

12/5/2023

re-rendering problem using useMutation

here is the link of my sandbox example in which the component re-renders if we change any input. onchange of input I update state of that field but I don't know why it re-renders re-rendering can be seen in the console. https://6fypr2.csb.app...

unwilling-turquoise

12/4/2023

What is the best practice for using initial data from another query before the query was settled

Hi! I have an expensive query that fetches all todo items and I also have an additional expensive query that fetches the todo of a single item. I would like to fetch all todo items and then use them as initial data for each single query. This will allow me to invalidate a single todo item without invalidating all todo items....

equal-aqua

12/4/2023

Check if query finished "loading" when data === undefined is expected (i.e. 404 expected sometimes)?

I'm trying to load a user's profile, given a user ID. The user might not yet have a profile. The query can be disabled until userId is know (it's loaded from the phone's keychain). I want to show either a loading screen, a create profile screen, or a view profile screen. We show the loading screen until we know whether the user has a profile and then the create/view screen, depending whether the user has a profile: ```tsx...

wise-white

12/4/2023

Query undefined if I reload the page

I'm using rq with nextjs. I'm using the pages router and I'm having the following problem: This is my query: ```const classrooms = useQuery({...

harsh-harlequin

12/4/2023

Using react query to distribute state when using with web sockets

If it is not advised to use react query to distribute some state in app, why connecting query with websocket is a suggested pattern. References: 1. https://tkdodo.eu/blog/practical-react-query#dont-use-the-querycache-as-a-local-state-manager 2. https://tkdodo.eu/blog/using-web-sockets-with-react-query#partial-data-updates 3.https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientsetquerydata...

deep-jade

12/4/2023

Authentication, Tanstack Query, React Router

As part of an application I'm building we're looking at using tanstack query in combination with a few other libraries to handle authentication and our API layer. The problem is that if an authentication error is thrown in a query because a refresh token couldn't be refreshed or something similar, there's no way to catch that without making all queries throwOnError and handling the auth error from the router. Any ideas or answers would be very much appreciated....

plain-purple

12/3/2023

Refetch on window focus

Hi. So i noticed something when I switched from v3 to v5. My queries don't auto refetch whenever the browser window is refocused. The docs say that is the default behaviour and switching back to v3 solves the issue. Is there some new configuration for this that I'm missing?

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