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

afraid-scarlet

3/1/2023

Fixing `useQuery` generic overload error

With ```ts /**...

conscious-sapphire

3/1/2023

I'm working with optimistic updates and data gets mutated fine but not reverted when an error occurs

Hey there, I was following this documentation to get optimistic updates working in my project. The full_name field in my profile object gets updated correctly when the user submits the form. But when I throw the error on purpose the data that got updated does not revert back. https://tanstack.com/query/v4/docs/react/guides/optimistic-updates ```...

flat-fuchsia

3/1/2023

Creating NPM Package That Uses react-query

Hello. I have a question about building an NPM package that uses react-query. If my package exports a function that wraps a call to useQuery will that query have access to the application's QueryClientProvider? In this case the application would call the exported function.

sensitive-blue

3/1/2023

Firefox Input type=date would trigger function after useQuery success to run again

I made a sandbox, but it tests as normal as I couldn't simulate the useQuery one on it. However, a few console log helps me to discover some issues. Expected: 1. I set date to empty...

extended-salmon

3/1/2023

How to imperatively get a single resource

I'm wondering what is the best way to go about fetching a single resource in an imperative manner. For example, when my phone receives a notification which is carrying an id, I want to invoke a fetch for that object id. Here's what I'm imagining the code to look like: ```js const Component = () => { ...

genetic-orange

3/1/2023

creating a custom useMutation hook

I'm struggling to create a custom mutation hook passing in variables and destrcuturing If i add destructed params inside useMutation if get property does not exist on type void Does this mean i need to pass generics to infer the types?...

mute-gold

3/1/2023

Recommended code generator for creating react query hooks from OpenAPI specs

I am currently looking for a library that would allow us to generate a set of query/mutation hooks based on an OpenAPI / Swagger specifications. I found a couple online but is there one that react query team recommends?

conscious-sapphire

2/28/2023

Creating a query that polls an endpoint but ends when server returns specific value

I'm currently using RTK Query in a project at work and it allows you to do things like this:

const { currentData, isError } = api.endpoints.pollingEndpoint.useQueryState(args);
usePollingEndpointQuery(args, { pollingInterval: 3000, skip: !args || currentData?.complete })

const { currentData, isError } = api.endpoints.pollingEndpoint.useQueryState(args);
usePollingEndpointQuery(args, { pollingInterval: 3000, skip: !args || currentData?.complete })

...

afraid-scarlet

2/28/2023

How to preload data for a component before rendering it

Is it possible to implement a setup similar to Remix's routing dependent data fetching model, but for rendering React components? Or is that just using Suspense? I have a data cascade that I want to eliminate, but not in a single hacky way, but more ergonomically...

dependent-tan

2/28/2023

:white_check_mark: How to tests calls to query client passed in function?

Example method ```js export function SetDoots(dootlist: string[], queryClient: QueryClient): void { for (let i = 0; i <= dootlist.length; i++) { queryClient.setQueryData([dootlist[i]], dootlist[i]);...

fascinating-indigo

2/28/2023

Trigger select in useQuery after arbitrary event

Hello! My select business logic depends on an external state. When the external state is updated I want that select to re-evaluate the result and maybe re-render component if structuralSharing advises for it. Is there any way to trigger select in useQuery utilizing internal react-query API avoiding network request/invalidation? PS: Majority of my useQuery calls have this kind of select with external state dependency, so global refresh() method would be handy, something like QueryCache.refresh()...

eastern-cyan

2/27/2023

How to handle redirect from query

If I were to get a 302 back from a query how would I handle that? Or should it not even be in a query hook?

sunny-green

2/27/2023

Use of graphql-upload

Hey, I try to wrap my head around the idea of using the react-query with the graphql-upload (https://www.npmjs.com/package/graphql-upload). What I want to achieve is to use graphql mutations where I will send files (jpg images) as a multipart instead of encoding them as BASE64 strings. I see that ppl tend to use that library but they always use apollo server with it - I don't want to use any apollo on my end, just clean react-query + graphql-request. I guess it's doable and I'm just to stupid to...

conscious-sapphire

2/27/2023

Accessing onError, onSettled in the component the mutation was called

I am making a mutation where if there is an error, I want to change something in the component where the mutation was called. How can I access this error state in the component? I want to show a message in the component that there was an error (instead of a snackbar)

absent-sapphire

2/26/2023

Is this weird rollback due to an unwanted re-fetch? (optimistic updates)

Check this code and this exact line: https://github.com/NarniaT/favorites-react/blob/8c2b2560c287fe7d14eecb13cd485055cad875f0/src/fake-fetchers/FavoritesFetcher.ts#L8 If you change the timeout in the code above to a value less than 500 (which is the time it takes for the toggleFavorite function in the same file to resolve), like 300, then checking an item as favorite will check it instantly (optimistic), but then for a short while it rolls back to its unchecked state, and then once again when the query has been resolved, it gets checked. I've also a GIF of what is happening. After searching a bit about this, I found this Q&A on RQ's GitHub discussion:...

genetic-orange

2/26/2023

How to use React Query with React's Context API

I am attempting to refactor a Provider component, where state is being handled, e.g. ```tsx const [products, setProducts] = useState<Product[]>([]); ...

adverse-sapphire

2/25/2023

why serving from cache mechanism stops working?

I am using @tanstack/react-query and react-router-dom for a simple app. The moment I introduce routing mechanism serving data from cache stops working and every request for data seems to trigger full scale request over the network. here is the sample app: https://stackblitz.com/edit/vitejs-vite-gsg5rw?file=src%2FApp.tsx,src%2Fhooks%2FuseCharacterDetails.ts,src%2Fhooks%2FuseCharacters.ts&terminal=dev...

absent-sapphire

2/25/2023

useQuery staleTime doesn't work for local (fake) fetcher functions?

Hi people. I'm completely new to React Query, I wonder why adding staleTime configuration (e.g., { staleTime: 20000 }) to this line doesn't work? I expect the checked favorites to remain the same when I reload the page: https://github.com/NarniaT/favorites-react/blob/c33178fca25f77ca65da619abfcb54f6dce397c2/src/hooks/useFavorites.ts#L12 getFavorites is a local (fake) fetcher, so React Query doesn't work in case of such local fetchers, or there's another issue I'm missing in my code?...

other-emerald

2/24/2023

Sharing a cache across <iframe>s

Is this possible if I export a provider and import it into multiple "apps"? I see in https://tanstack.com/query/v4/docs/react/reference/QueryClientProvider that contextSharing is deprecated but wasn't sure if it's just something that just works automatically now or didn't work well before and won't work? Thanks in advance!

national-gold

2/24/2023

`No QueryClient set, use QueryClientProvider` jest test error despite passing queryClient

Hi folks. I'm on React 18 and react-query 4.22.4 and I am trying to get started with jest testing. I've written a custom hook that uses useQuery and looks like this: ``` export const useCheckTokenPermissions = () => { const queryKey = ["auth"] const params = {...

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