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

exotic-emerald

11/20/2022

Unhandled runtime error using useMutation hook

I am using useMutation hook to update my database records. I thought that useMutation hook handles the error with onError method, but instead I get unhandled runtime error, here is my code: ``` const updateDiary = async (updatedDiary: Day[], userId: string) => { const { error } = await supabase .from('current_diaries')...

quickest-silver

11/20/2022

useMutation onError behavior

Hey there, I'm freaking out here. I'm sending a POST using useMutation , and if the API returns any errors I call setErrors inside onError callback. But I don't understand why setErrors is only being updated when I click in the Submit Button for the 2nd time. ...

sunny-green

11/18/2022

Purpose of mutationKey in useMutation

Hi, can anyone explain to me what is the purpose of mutationKey - there is very little information in the docs - it mentioned that this can be used to identify mutations in the dev tools but so far I am not able to inspect any mutation in the dev tools - I only see queries. What is the purpose of mutationKey and is it best practice to always put it in useMutation? Thank you! 🙂

flat-fuchsia

11/17/2022

useMutation POST request returning `(400) Bad Request`

I created and tested an API for multipart/form data POST request using ExpressJs and Postman(for testing). Everything works fine in postman but trying make the request on client-side(React) using useMutation is returning the `(400) Bad Request. Below is the code For API controller file ...

optimistic-gold

11/16/2022

How do I fetch even on background?

As of now the query only refetch if I click on the window, otherwise it doesn't update. How do I check if there is a change in the database and update the query without having to click on the window?

correct-apricot

11/16/2022

How does React query manage timers?

Just being curious, how does React query manage timers for invalidating the data or marking the data stale? I am hoping that setTimeouts are not being used here!...

ambitious-aqua

11/15/2022

How to set the setQueryData cacheTime to infinite?

I want to save some sync data in my cache for as long as possible. Right now it is garbage collected as soon as you refresh the page.

funny-blue

11/15/2022

Looking for (typescript) useInfiniteQuery examples with a nextPageToken

I think that this guide: https://tanstack.com/query/v4/docs/guides/infinite-queries is not really sufficient in getting somebody familiar with how useInfiniteQuery works. For example it doesn't really clarify that lastPage is like a data obect (for the last page)...

harsh-harlequin

11/15/2022

Refetch once a day (at midnight)

Hello ! I'm trying to refetch data once a day, but I have an extra constraint that the data's cache should only refresh when the day changes. Does react-query have an option I could use to handle this edge case?...

quickest-silver

11/15/2022

React query populate initial state

Hello all, I have a question I am trying to populate a state when the component first renders, using react-query. I am able to do it using useEffect, but wondering if there's a way to do it without it. currently I have something like this, I have also tried something like this as well. Maybe I am missing something basic?

 const [selectedCountry, setSelectedCountry] = useState(!isLoading && labels[3]?.label);

 const [selectedCountry, setSelectedCountry] = useState(!isLoading && labels[3]?.label);

...

fascinating-indigo

11/13/2022

queryClient.invalidateQueries failed. help neeeded

```js const addProject = async (...) => { const { data, error } = await supabase.rpc('create_project', {xxxx}) if (error) { throw new Error(error.message)...

extended-salmon

11/13/2022

Multiple modules - hook factory?

Hey folks! I wanted to ask you if you have any battle tested solutions for a scenario like so. In my app I have many modules - let's say it's about 20 of them. Each module communicates with the corresponding backend module, which typically consists of the same set of enpoints - POST, GET paginated data, GET full list, GET single item, PATCH & DELETE. So for each frontend module I'm creating a bunch of Tanstack Query hooks which end up being quite similar (they accept the same set of parameters b...

fascinating-indigo

11/12/2022

data from multiple endpoints

I built data from two different endpoint with one single queryKey. Is there a better pattern? Thanks ```js const fetch= async () => { const { data1, error } = await axios .... const { data2, error: err } = await await axios .... ...

fair-rose

11/11/2022

Using React Query with Supabase

Hi, i've just started using React Query and i'm a bit confused about how i should use it with supabase. If someone who already have an experience with it could help me, i would be very much appreciated. I getting the current user like this ```export const getUser = async () => {...

other-emerald

11/10/2022

It was working fine with version v3*

I am migrating to react-query v4. On my machine it works also fine but not on remote server. Mutation function keeps stale state for some reason. ```js const [shouldDrop,setShouldDrop]=useState(false) const mutations= useMutation(["id"],(data)=> {...

gradual-turquoise

11/9/2022

Mutation onSuccess doesn't have ID returned from server

I'm trying to navigate to a newly created page on mutation success, but there is an ID missing. ```js const addDeliveryTypeMutation = useMutation({ mutationFn: addDeliveryType, onSuccess: (data, variables, error, context) => { console.log('error', error)...

optimistic-gold

11/9/2022

Correctly typing data on `placeholderData`

I want to use an object which is a partial of the data to display a better loading state. Imagine a blog post index that only has the title, when routing to the post it starts fetching the full post, but meanwhile I'd love to use the partial post from the index as placeholderData. However, while loading the type of data is not partial. Any thoughts, am I doing it wrong?

extended-salmon

11/8/2022

CSRF Token

is it possible to implement CSRF token with react query in Next.js? I am using Next Auth as well.

evident-indigo

11/8/2022

Check the status of query?

I am performing a post, which thereafter I want to close my drawer but only after some of my queries are done refetching. Being that I dont have direct access to my queries, I went the route of checking the queryClient and using getQueryState, however I can't figure out how to do a matchall with getQueryState so I am currently stuck looking at the queryCache and having to poll the state of each query to see if it is finished... is there a better way?

harsh-harlequin

11/8/2022

Prefetch a query, then skip fetching when using the query

In order to avoid loading states I'm prefetching a query before navigating to a new screen. On that screen I'm using the query. If add a log to the queryFn I see it's being called when prefetched (as expected) and then again in the component calling useQuery (not as intended). I'm new to this library, is there a way I can set a cache setting or something so that I can avoid the second call when navigating but still get the benefits of useQuery for refetching afterwards? Component that does the prefetching:...

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