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

fascinating-indigo

5/16/2023

Get value from query hook or pass via props?

Does anyone have a general guidance of when values should be passed via props vs calling a query hook to get the values? For example, in a dashboard page I call a useUser hook which uses useQuery to return the current user. When a settings component mounts as a child of the dashboard component that also needs the current user value, should I pass the value from the dashboard component to the settings component or should I again call my useUser hook inside of the settings component to get the cur...

xenogeneic-maroon

5/16/2023

Query client on SSR memory

Does anyone know if this ``` function CustomApp({ Component, pageProps }: AppProps<AdditionalAppProps>) { const [queryClient] = React.useState(...

quickest-silver

5/16/2023

keep delivery token secure

hey, I am using next, react query and query client (gql) to fetch content from a headless cms. They have two token for delivering content and delivering draft content. I want to have the draft token to be secure. But if I understand it correctly, it needs to be client side if I want to refetch data?! Is that correct? Can someone explain how it works? Can someone maybe give me a hint how to do this correctly? I think I have to reroute all my API calls over a proxy?! Or is there a better way with...

jolly-crimson

5/16/2023

persistQueryClient support suspense?

I'm using react-query in react-native, and I'm trying to use persistQueryClient to cache it locally, but suspense doesn't seem to work in my app and the data comes down as undefined.

deep-jade

5/15/2023

How to refetch partial data?

Hi o/ I'm new to working with react-query and I'm not sure how to best handle this problem: I have a useQuery hook that calls my api which returns an object like this: ```json { "invites": [...],...

quaint-moccasin

5/15/2023

on* callbacks alternative

Hello, I've seen that several query callbacks (e.g onSuccess) will be deprecated in the next major version. Unfortunately I didn't find any alternative on the v5 Roadmap. How will it look like?

fascinating-indigo

5/15/2023

What happens to refetchInterval when we call refetchQueries ?

If a query have refetchInterval set let's say every minute, whenever we call refetchQueries for the same key within a min interval. Will it set the refetchInterval to 0?

plain-purple

5/15/2023

Save & use data from local storage as initialdata and only fetch if data is not in ls

So here is my use case: - When a user logs in for the first time, fetch some data about the user from the api -- This I control with enabled: authenticated - Save the fetched data in local storage -- This I do in the onSuccess function...

other-emerald

5/15/2023

useMutationState `has no exported member named`

Hello, I'm trying to use this hook. It seems like the package still not available? or did I miss something? Thank you in advance for response. 🙂

genetic-orange

5/13/2023

Mutation forcing me to pass some data

Hey everyone, ```tsx const logoutMutation = useMutation({ mutationFn: logout,...

typical-coral

5/13/2023

React Native 429 error

My API keeps telling me that I'm hitting it too much with my React Native application. Is there a way for me to log every time a query happens so I can debug why React Query is hitting my API so much?...

automatic-azure

5/12/2023

how do I prefetch the next page?

I have a custom infiniteQuery hook, and I want to prefetch the next page on success. I'm using TRPC, but I think it's more appropriate to ask in here since it's more RQ related, my current implementation is this: ```js onSuccess(data) { const cursor = data.pages.[data.pages ?.length - 1]?.nextCursor console.log(cursor)...

ambitious-aqua

5/12/2023

Next 13.4 - No QueryClient set

Hey, I just created a new next.app (13.4), added @tanstack/react-query. Created _app.tsx file in app folder and put what's in the SSR section of RQ documentation. Created page.tsx inside folder called 1 inside app folder and just used react query like I used to: const query = useQuery({ queryKey: ['todos'], queryFn: () => axios.get('/any/thing') }). And only thing I get is: Error: No QueryClient set, use QueryClientProvider to set one...

national-gold

5/12/2023

Why does query not re-execute after Key changes?

Using vue-query@4.29 why does this query not refetch when the findOfferForm.zipvalue changes? ```ts const citiesQuery = useQuery({ queryKey: ['getLocationsByZipcode', findOfferForm.zip],...

plain-purple

5/12/2023

Query Key Factory type not inferred for old data in queryClient.setQueryData

So I am playing around with the query key factory and looking for patterns to establish that I will use, and the first "roadblock" I hit is with queryClient.setQueryData. ```ts const useFollowUser = () => { const queryClient = useQueryClient();...

stormy-gold

5/11/2023

Why does react-query devtools makes my component disappear?

I noticed that whenever I open the react-query devtools, my component seems to disappear. I realized after inspecting the DOM, it seems to add padding to my component every time I open the devtools. But when I close the devtools it removes the padding and my component reappears. This is very strange but was wondering if anyone has further insight into how the rendering of the devtools works?

genetic-orange

5/10/2023

preFetchQuery data isn't being used

I'm doing a prefetch of data in a client side component and then query the same key in a click interaction, but this seems to fetch the same data again, according to the browser's network activity. After both fetches, the React Query devtools show that key as 'inactive'. I can see the state go from inactive to fetching on click and then on any subsequent, it's clearly accessing the cache. How would I debug this further?...

tame-yellow

5/10/2023

Seeking suggestions for React Query folder structure

Hey everyone, I'm currently working on a React project with React Query and I'm looking for some suggestions regarding the folder structure. I want to ensure that my project is well-organized and maintainable in the long run. any suggestions much appreciated - Thanks in advance...

robust-apricot

5/10/2023

Optimistic update reverting back to cache

I have a custom hook I'm using to POST todos and also edit them. One issue that I'm currently facing is that when I make an edit. The request goes through successfully, but when the data is invalidated onSettled function it will make a fetch request to the disk cache instead of server and that returns previous data. ...

stormy-gold

5/10/2023

Callback after final mutations when dealing with consecutive mutations

Per the docs, mutation.mutate lets you pass in an onSuccess which only runs after the last mutation in a series of mutations is complete (think removing rows from a server-data driven table). However, as also mentioned in the docs, there are situations where that onSuccess won't be called (i.e. the overlay that calls the mutation unmounts). Is there a way to get the same behavior with the onSuccess passed into useMutation? The goal is to only invalidate relevant queries once the series of mutations is complete. If I invalidate after every mutation alongside optimistic updates, it ends up with some fun back and forth in the UI. I can whip up a codesandbox if needed....

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