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

genetic-orange

7/5/2023

How to clear cached data (security standpoint)

We have a multi-stage data loading partially subscriptions from the server. A typical flow - 1) Get the uid from out auth library ex. "someUid" - 2) Based on the auth we subscribe for the group ids the user is added to ex. ["aaaAAA", "bbbBBB", "cccCCC"] - 3) Based on each of the group ids we subscribe for group info. in our case it's 3 separate subscriptions. xx. "aaaAAA" -> { "name": "A team"}, bbbBBB -> { "name": "Betas" }, cccCCC -> { "name": "Crips" }...

inland-turquoise

7/4/2023

When I update a form and invalidate the query in React Query, the input fields with defaultValue...

When I update a form and invalidate the query in React Query, the input fields with defaultValue don't get updated. Is this expected behavior?

flat-fuchsia

7/3/2023

architecting complex calendar app

I'm building a complex calendar app and need some help with react-query implementation.. Users can 'subscribe' to multiple calendars, a calendar from a person, a room and a class. Each different calendartype has their own api endpoint. This api-endpoint receives a startdate/enddate and class/room/person id I'm using a calendar component which returns the fromDate and ToDate that is visible in that view. So for ex 2023-07-03 - 2023-07-09. We need to get data for these dates. Also this calendar component needs 1 array for all the events with a predefined structure. ...

deep-jade

7/2/2023

Way to avoid refresh while there are paused/dangling mutations waiting to run?

👋 Started using React-Query a few weeks ago and loving it. Its very refreshing, outright fun! I've gotten pretty far with my experimental shopping list app and last time out we noticed that the internet at our grocery store is terrible. I searched a bit around and have experimented with optimisitic updates in the mutation that checks off items in my shopping list. When I know turn the internet off via the DevTools, I'm able to check/uncheck items and the mutations complete when I get back on the internet. ...

like-gold

7/2/2023

queryClient.invalidateQueries works... but only for a while

Hi, I have the following. I want to refetch the list of favourites from my API every time a user favourites or unfavourites an item. This code works as expected, the app will send a POST or DELETE request, invalidate the queries, and make a GET request to refresh the favourites. But after a short amount of time, say ten minutes or so, it stops working. It will send the POST or DELETE, but the queries do not get invalidated to the favourites are never refreshed ```export function useFavourite(options: UseMutationOptions = {}) {...

xenial-black

7/2/2023

React Query Infinite Re-Rerender

Hello, I'm noticing a weird behavior with my code. I'm pretty certain I'm doing something wrong, I'm just not sure what. ```tsx...

flat-fuchsia

6/30/2023

new QueryClient in Next.js application

I have a Next.js application using the pages router. At the moment all data is being fetching client-side with react-query. If I am not using SSR should I still create the new QueryClient inside of the App component in the _app.tsx file or should it be outside of the App component or does it not matter? Thanks is advance!...

rival-black

6/30/2023

Is suspensivereact-query ready for production usage?

Hello. I see the mention about suspensive in tanstack/query documentation. https://tanstack.com/query/v4/docs/react/community/suspensive-react-query Is it means it passes some review from tanstack command? How stable is it? Is it ready to use it in production?...

generous-apricot

6/29/2023

Hi all, I'm getting this error when I use QueryClient set/getQueryData:

can't assign to property "exact" on "workspaces": not an object this is my code ``` queryClient.setQueryData('workspaces', (oldData) => { return [...oldData, data.data]...

typical-coral

6/29/2023

queryCache.findAll(key) weird behaviour

hi. I have a function which returns some cache data but i want it to return undefined while nothing found in that case im getting some strange result return undefined doesnt work...

mute-gold

6/29/2023

Waiting for fresh data before displaying component

Hi! I'm creating forms that use the technique described in https://tkdodo.eu/blog/react-query-and-forms, where react-query is used to populate the initial data but then it's turned into local state for the form while it's being edited. If there is stale data already cached, then during the component load I might accidentally use the stale data as the initial data. What's the recommended way to wait for fresh data before rendering the form? Currently I just want for query.data !== undefined but I was wondering if it might be enough to replace that with query.isFetching or something else. Thank you!...

equal-aqua

6/29/2023

How to hydrate a global store without using onSuccess?

Lets say I want to fetch a product and set the result to a zustand store. ``` //Get zustand store setter const { setSelectedProduct } = useCustomerTransactionStore(); ...

flat-fuchsia

6/28/2023

Run build / Deploy to Vercel Failing

My build / deploy is failing with: Error: Not implemented. I'm essentially following these docs to the T: https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydrate Vercel deploy logs: https://pastebin.com/tBeuTGH1...

plain-purple

6/28/2023

Pagination and searching together

Hi, amazing library. I'm looking for a way to achieve both pagination and searching together (with caching features of react query, of course) but I couldn't find a specific example since my usage is also specific. What is the most used pattern for such task or are there any resources you recommend?

sunny-green

6/28/2023

Invalidate query always get data from cache

I'm new with React-Query, after mutation success then invalidate query but the query always get old data from cache instead of making new request. PLS let me know how to fix it, TKS!

deep-jade

6/28/2023

Testing utility function for rendering React Query hook

I am testing React Query hooks and would like to write a function which takes a React Query hook as a prop and returns renderHook(() => props.useQueryHook, {wrapper: createWrapper()} However this doesn't work because because the useQueryHook loses context from the QueryClientProvider returned by the createWrapper function. How is this example different than just calling the renderHook method directly in the test?...

implicit-lime

6/27/2023

SolidJS component prop not reactive to change in solid-query query data

Running into a case where a prop I'm passing to a component isn't reactive to changes in its computed function ```<MealCard meal={{id: option.id, name: option.name, ingredients: []}} isWinningMeal={option.id === winningMealId()} votesComponent={<Votes option={option} />} /> ...

like-gold

6/27/2023

Is it even possible to persist paused mutations that are resumed and then fail?

My mutations are already persisted locally when offline. However, when back online if the mutation fails (also with retries) and I refresh the page, it is all lost. Is there a way to still keep the failed mutation and treat it as a paused one after a page refresh? I don't want to build something custom if react-query supports it and I'm unaware of it. Thanks.

fair-rose

6/27/2023

Data isn't being passed into function correctly

Super weird bug, I use a QueryFN to execute an API call. This is something I've done a million times before (in fact immediately below the code I am about to share, I run another few API calls that use extremely similar syntax. I pass in two variables into the function, one called "appUrl" and another called "isApp" -- when I console.log them, they look how I want them to look... isApp is a bool that gets set correctly, appUrl is indicitive of what I want it to be too... then I call useQuery... const info = useQuery(['info'], ()=>getInfo(appUrl, isApp), {onSuccess:(data)=> setResID(data.data[0].id)})...

unwilling-turquoise

6/27/2023

How to avoid refetch if stale even if user manually reloads the page.

Title

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