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

homely-rose

1/31/2024

can use only 2 args on useQuery()

Hi I can’t use more than 2 arguments when invoking useQuery with options (keepPreviousData) Error : no overload match this call...

typical-coral

1/30/2024

How to know if a state has changed from another component using useEffect

Details of my question are provided below: https://stackoverflow.com/questions/77903315/how-to-know-if-the-state-in-react-query-has-changed-from-another-component-using Note that it's not the same case of mine, but it's something very relative....

criminal-purple

1/30/2024

How to get cache update in another component when data has been updated somewhere else?

Using tanstack/svelte-query. It returns undefined but the data in the cache is updated after fetching. ```js...

flat-fuchsia

1/30/2024

Are errors cached in react-query?

Say i have a query in my component. and for some reason it returns an error. i see that if i travel back to that component, a request is not remade, even though my staleTime is set to 0. ...

fair-rose

1/30/2024

invalidateQueries

Why is the incorrect way of invalidating working and the what I believe is the correct way not? ```const result = useQuery({ queryKey: [WORKOUT_CACHE_KEY, ['/set'], id], queryFn: () => getSets(id),...

optimistic-gold

1/30/2024

Showing a message if a request is taking a long time

Hello, I'm trying to do something like show a message if a request (in this case, a mutation), is taking a long time. This is what I have so far: ```tsx export const useExampleHook = () => {...

rare-sapphire

1/29/2024

Tip on improving data fetching of google map markers

Hey, for a customer I am creating a post pickup point map, using the google maps api, geocoding and autocomplete. For the markers I fetch new markers for the items that are in the viewport, and I do this every-time when the center of the map changes. (it is debounced, so not excessive) I have a useQuery hook, that stores the postalcode for each search as a cache key, this is a limitation of the API we are using, it does not accept bounds or latlng values. Since I fetch the data for every postalcode seperatly, the other markers are not longer visible when zooming out, which is the way it should work since those cache keys are no longer active. ...

old-apricot

1/29/2024

Why no TS useQuery type?

Hello, In the useQuery docs, there is a pretty explicit return data object definition (data, dataUpdatedAt, error, errorUpdatedAt, failureCount, etc...). Why is it not available to define in my code? (I keep reading complicated stuff about generics)......

extended-salmon

1/28/2024

Does react-query conflict with server components in Next.js?

From the Next.js docs:

Next.js has a built-in Data Cache that persists the result of data fetches across incoming server requests and deployments. This is possible because Next.js extends the native fetch API to allow each request on the server to set its own persistent caching semantics.

If I just make the react-query fetcher use native fetch (not axios or something) it shouldn't conflict right? ...

correct-apricot

1/28/2024

Default Mutation Function best practices and Typescript

I've set up a default query function per the guide in the docs, but there's no guide on a default mutation function. I'd like to set on up so I don't have to get the auth token in each component, etc. Can I just do the following: ```javascript type MyMutationFunctionProps = { apiPath: string...

helpful-purple

1/28/2024

Remix hydration errors

I'm getting hydration errors using react-query with remix. Seems the server is caching initialData on subsequentRequests. This repro shows that after hydrating a page with a query populated with initialData from the server, remix will blow up when refreshing on another page using the same query without that same initialData. This is because the server has the original initialData and so is rendered with the cached data, but the client does not have access to that initialData and renders isLoading state. https://stackblitz.com/edit/remix-run-remix-zjutjv?file=app%2Fcomponents%2Fcomponent.tsx...

fascinating-indigo

1/27/2024

pnpm workspaces, @tanstack/query-core not resolved by @tanstack/react-query

I'm trying to switch over to pnpm in my monorepo but am getting the following Typescript error when using React Query: Module '"@tanstack/react-query"' has no exported member 'QueryKey'. When digging into what is exported, I noticed that react-query isn't detecting the core package - where I'd think these types are exported from. ...

plain-purple

1/26/2024

useMutation - updating a single entry in onMutate

I am trying to follow the tutorial on tanstack for doing optimistic updates. I cannot make their example work in my app for updating a single entry in the onMutate function. I am following the guide here: https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates for "Updating a single todo".

absent-sapphire

1/26/2024

Mutate send response

Not sure if im being stupid or what, is the best way to pass back the response using useState or is there a easier way for me to access the response. Also any advice to clean up the code is appreciated 🙂 ``` import { useMutation } from '@tanstack/react-query'; import { Endpoints } from '@/config';...

inland-turquoise

1/26/2024

How to run dynamic Query in Tanstack Query?

0 I've been having a rough time understanding tanstack/query. I'm trying to fetch data using tanstack. What I'm trying to get is store the data in my state, and then when I press the button, it will pass to my URL and then it will call the button....

harsh-harlequin

1/26/2024

handling updates to optimistically rendered items that haven't resolved yet

When a user adds a todo, I optimistically render it. However, it won't have an 'id' until the mutation actually resolves. If the user tries to edit the todo before it has an id, it causes problems. The easy but bad UX solution would be to disable interaction until the mutation resolves. I think it would be better if there was a way to queue the next mutation and have it wait on the first one resolving. I feel like you could do something with useIsFetchching here. Would appreciate some ideas!...

xenial-black

1/25/2024

mutationOptions helper

Hi there! I've been working on refactoring some of my codebase's react-query usage (with inspiration from https://tkdodo.eu/blog/the-query-options-api). I see there is a queryOptions helper, which can be used to build QueryOptions objects, and I've gotten through refactoring all of my queries. Is there such a thing for useMutation? Even though my function is returning a type that satisfies UseMutationOptions, typescript seems to not like it. Any suggestions? Thanks...

manual-pink

1/25/2024

Integration with react/stately

I am using a ui library that uses react/stately with there table to add functionality like Infinite pagination so i wast thinking how can i integrate it with react-query ``` let list = useAsyncList({ async load({signal, cursor}) { ...

eastern-cyan

1/24/2024

Typing mutate() variables when using setMutationDefault

Hi, I have some simple code here to set up a default mutation function and then call that with a useMutation, but it doesn't like the variables object I am passing in to mutate because it's not of type void. How do I type the variables object? The mutation function parameters are already typed so I'm not sure where it's expecting me to set this up. ```ts // query setup const createAction = async ({...

correct-apricot

1/24/2024

refreshing access token manually in axios

In my axios API calls, I need to give an Authorization header with the access token -

``
const res = await axios.get(

https://us-east-1.aws.data.mongodb-api.com/app/${process.env.REACT_APP_APP_ID}/endpoint/taskLogs`, {...

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