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

sunny-green

6/20/2024

External devtool cannot update component

Hey guys, I'm using the external devtool from this repo: https://github.com/LovesWorking/react-query-external-sync/ But at the moment I have both the debugger and a query on my app, it throw me the error:...

absent-sapphire

6/20/2024

Can I make isFetching true after 500 milliseconds ?

isFetching is useful for show/hide loading UI during fetching but sometimes API response is too quick so the loading UI is displayed and disappeared very fast. It looks like glitchy. So I wonder if I can have an option to make isFetching true after a certain milliseconds?...

rare-sapphire

6/20/2024

Layout component fetching useQuery and child component

Heyo, super happy that Tanstack exists, I'm still learning it. I have a _layout route component in tanstack that uses a query to fetch data and then for the child component I want to use the same query to use the cached data. ...

sensitive-blue

6/19/2024

useFocusNotifyOnChangeProps is not fresh after re-focus

Hello! In react native I have a screen where I load data with react-query. When it's out of focus I would like to not refresh the data. I checked the useFocusNotifyOnChangeProps as docs said, it works well but something is missing. ...

deep-jade

6/19/2024

How Does removeQueries work with placeholderData:KeepPreviousData??

Hey everyone. I'm trying to build an application where user can have business accounts. Business Account are what drives the 90% of my application. Change in Business Account should remove all the cached queries and fetch settings data to provide globally. The Issue I am facing is with queryClient.removeQueries and placeholderData:keepPreviousData. Every time I switch business. All the cached data get's removed but the page that I am currently In uses the previousQuery data until the data for the new business resolves resulting into isLoading being false and isPlaceholderData being true. What I want is to show Skeleton in every places when ever the business get's changed. Here is a minimal reproduction https://codesandbox.io/p/sandbox/demo-4wvwr4?file=%2Fsrc%2FApp.js...

helpful-purple

6/19/2024

Pagination with infinite query...

Hey everyone... i'm thinking to use infinite query to retrieve data for a table with pagination... but probably is not the right choice because if i go back my pages result grows up... what am I doing wrong?.... for example if i look this: ``` useInfiniteQuery({...

passive-yellow

6/18/2024

Pages is undefined with infiniteQuery when data is empty array

I have the following infiniteQuery: ```tsx export const shopListingInfiniteQueryOptions = (queryParams: ShopListingSearchInputDTO = {}) => { return infiniteQueryOptions<ShopListingOutputArrayDTOAPI, AxiosError<ShopListingOutputArrayDTOAPI>>({...

xenial-black

6/18/2024

Is `useOptimistic` relevant if use use react-query ?

I mean the useMutation hook covers the same thing, right?

vicious-gold

6/17/2024

useQuery returns "loading" while data is already fetched

hi can anyone explain me i have a query ```const useSomething() { return useQuery({...

sunny-green

6/17/2024

How to update a pending mutation

I'm currently facing a scenario where I'm using a QR code scanner that triggers an axios.post request on each scan. To optimize responsiveness, I've implemented onMutate to proceed without waiting for the API response. However, I also need to allow users to edit this information even when offline. The current online workflow functions correctly: upon scanning, a toast appears, and clicking it redirects the user to a form where they can edit the information. However, I'm unsure how to handle offline scenarios where I might need to edit a pending mutation. Any insights or suggestions on how to manage offline edits alongside pending mutations would be greatly appreciated....

constant-blue

6/17/2024

Cache is not updating

I wrote this code based on what I read at https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updatesI have a table component that has pagination that inserts the page number into the url and whenever I go to the second page and make some interaction to update the data, the data is not updated instantly, only if I reload the page. Once this happens the data is never updated again, even on page 1. I tested it before by putting an await refetch() in onSuccess and it worked correct...

message.txt

quickest-silver

6/17/2024

Stuck in fetching state if user changes page while fetching

Not sure if this is a bug or something I didn't configure properly but when a user changes the page while its loading, the query gets stuck infinitely in the "fetching state" This is what I have in my query provider, I've been playing around the settings and I just can't figure out what's causing this annoying issue I'm on v5.45.0...

sensitive-blue

6/17/2024

Error: Server Functions cannot be called during initial render. This would create a fetch waterfall.

I am trying to use a prefetch in my page (SSR) and then a useSuspenseQuery in my client component to call the same queryOptions Unfortunately NextJS is complaining about using my function (getThread) as a "use server" function in the initial rendering. One workaround would be to export it twice and wrap it under a "use server" when fetching in client and as "only-server" when SSR. But this is gonna generate a lot of boilerplate. Any suggestion about best approach to handle this? :prayge:...

sensitive-blue

6/16/2024

best way to handle errors of api that returns status 200 w error field

Is there a better way than an if / else condition onSuccess if your API returns 200 for errors ? my api returns always a 200 with fields { data, errors } and I would love to be able to get the errors in the onError() method...

harsh-harlequin

6/15/2024

is it okay to use tanstack query cached data globally as like context

I am using react query cached data in my mostly all component when I need that fetched data. So is it safe to use to cached data instead of using context?

typical-coral

6/15/2024

is useQuery better than useInfiniteQuery for Infinite scroll table serverside search,filter etc.?

I see useInfiniteQuery basically just keeps the previous data and you request next page, but when you do serverside search-sort-filtering, you of course do the last page search-sort-filtering, because you only know the lastPage, isn't useQuery basically better in this case with some adjustments on serverside? at least it doesn't duplicate items that way. or what i'm a missing?

adverse-sapphire

6/14/2024

Registering a global Error, doesn't work

in my react-query-error.d.ts file, ``` declare module '@tanstack/react-query' { interface Register { defaultError: AxiosError<ProblemDetail>;...

rare-sapphire

6/14/2024

I have a useInfiniteQuery fetches the same duplicate data for the first 2 requests

Is there a scenario where a duplicate fetch of data would happen when using useInfiniteQuery?

frail-apricot

6/14/2024

Mutation context in offline mode

Hi, does anyone know if it is possible to access a mutation context without it being resolved yet (offline mode). I'm creating temporaries ids on my onMutate callbacks that i then put on my query context (offline mode) and i'd like to access it even though onSuccess / onError / onSetteled have being called as I'm offline. This is how my mutatinon function looks like, it is made to handle offline mode...

sensitive-blue

6/13/2024

executing enabled false query

``` export function getAssistantOptions(id: string | null) { return queryOptions({ queryKey: ['assistant', id], queryFn: () => console.log('log'),...

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