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

reduced-jade

12/23/2022

query Auth check combined with Mocks

I check with useQuery that user is Authored on server but, i also have functionality to turn on Mocks, which means user is always Auth (no need to check on server) So now i call Auth Query on app mount and store result in a Context. In the same page i am able to set Context Auth value to true if mock_mode is on....

metropolitan-bronze

12/23/2022

How do I prefetch the pageProps.json dehydration request?

Background: I'm using react-query in Next.js with hydration. Every time I request a new page, there will be a request before the navigation. The request path is like .../pageName.json?query=xxx which returns the props in getServerSideProps. Question: But the request takes some time to finish, and makes the navigation not smooth. Is there any way to prefetch the pageProps request so that the navigation can be more smooth? Thank you in advance....

probable-pink

12/22/2022

Avoiding fetch many times when fetching by text?

I have a react-query hook that goes like this: ``` const { data: users, refetch } = useGetUsers({ page,...

xenial-black

12/22/2022

Why onSuccess isn't called when query is revalidated?

I've noticed that useQuery prop onSuccess isn't called when stale query is refetched and result data is the same. Is there a way to overcome this?

sharp-indigo

12/22/2022

Initial data not being used

Hello 👋 any ideas why the initial data are not being used in the code below.
I have checked that data are in the cache but request happens regardless. ...

afraid-scarlet

12/22/2022

isError does not come true when onError is raised

I have an usemutation example, when I get 500 in this example, it falls to onErrror, but the isError, error or isSuccess I use does not work correctly. ` const queryClient = useQueryClient(); return useMutation( ({ id, values }: driverCreateResponse) => createDriver(id, values),...

ambitious-aqua

12/21/2022

How to disable background refetching globally

Hi, we are doing a frontend application which doesnt require polling for new data in the background, how can we disable this setting for the entire application as a default(if we have dynamic data we would surely enable background refresh for certain queries)

conscious-sapphire

12/20/2022

Navigation

Hello! New here. What would be a common cause of a useQuery fetching data when the page is refreshed, but then not when I navigate forward or back to the page? Is there something extra needed to get it to do that?

fascinating-indigo

12/19/2022

Getting the same 1st old data when trying to fetch data using useQuery in a .map() method.

```js Parent component ------------------------ {userDoodlesData.map((doodle: any) => (...

xenial-black

12/19/2022

Change UI state on successful data fetch from server OR cache

I have a scenario where I am fetching the options for a dropdown from server. And along with the options, the response also contains which of the options is supposed to be default selected option in the dropdown. The response of the API does not change at all, so I set the staleTime as Infinity. But whenever the component is mounted again, the default option is not being set in state in onSuccess callback. I could think of two ways to go about this. 1. Fetch the data from server and change the state in onSuccess callback. Con: I have to set staleTime to default or use refetchOnMount to always. Every time the component is mounted, the cost of unnecessary network calls is incurred....

continuing-cyan

12/18/2022

react-query + pocketbase sdk

Hello, can someone please tell me where I should init my PocketBase SDK API client (https://github.com/pocketbase/js-sdk#usage) so I can use it in all my app components with react-query. What is the best practice for this ? Wrapping the react-query context provider in another provider for the client ? Or init and importing the client from a global store (zustand in my case) ? I saw an example that init the client + create the fetch functions using the client in a config.js file and then just imports the fetch functions in the rest of the code, but it doesn't seem very scalable....

metropolitan-bronze

12/17/2022

How to run useQuery with the press of a button

New to react-query v4 and was wondering how i should implement the following feature, we have an endpoint that has to be called on a button press. For example: Button A: <Button onClick={() => fetchRedirectUrlByOption('a').then((data) => window.location = data.url;} />...

harsh-harlequin

12/17/2022

react query mutation and async await

Iv'e just seen this code in a PR ``` const handleSubmit = async (values) => {
useApplication.mutate(values, {...

xenial-black

12/15/2022

Does prefetchQuery work with the persistQueryClient?

I'm building a chrome extension that persists serialized data to localStorage using prefetchQueryClient (amazing add-on, highly recommended, saves a ton of developer work - thank you to the authors). However, I notice that every time I open my chrome extension, it makes prefetch network requests although cache time is set to Infinity. The data is still being persisted locally, so I was wondering why the prefetch was still running requests -- if it's supposed to check if the cache exists first (which it does)....

stormy-gold

12/15/2022

Mutate a paginated cache for optimistic updates

Hello, Has anybody managed to pull it off successfully? It seems to be a bit too complicated to insert/delete a record if the cache is paginated...

like-gold

12/15/2022

Handling loading of multiple queries

Hi, I'm curious. How do people generally handle initial loading in the case of React components which use data from multiple queries ? For instance, say I have a component which displays a spinner while waiting on 4 different queries. Typically I'd just add a loading variable thus :...

fascinating-indigo

12/14/2022

Best way to handle combining 2 data objects.

Hi, so my question has to do with combining 2 separate fetched data objects. The current solution I have right now is I create a local state and then set that local state a new custom object containing the 2 fetched data objects from react query. I was wondering instead of doing this hack, is there a way to directly handle combining 2 data objects into 1, straight from react query without having to rely on creating a local state.

absent-sapphire

12/14/2022

How to handle param build by two or more hooks?

Right now I have an a opportunity to rebuild one of my company applications and i want to use react-query instead of useeffect's, but I have one problem with that. Main useEffect that fetch records data have many query paramas like &ordering=${sortNameColumnAsc} and that's something I can handle, but I don't really have anything in mind, how to handle something like that &number_calls=${conPerLeadStart},${conPerLeadEnd}. And in that app we have many of params that're build on two hooks. How can I handle that using react-query?...

optimistic-gold

12/12/2022

Limiting Concurrent Mutations

Is there a way to limit the number of concurrent mutations on the same mutation variable? I know I can build in UI & server logic to limit it. But for example... a user might click a button and it takes a second to process. And during that time they might mash the button a few more times causing many requests. I do have some logic built in to prevent this client side, but is there something that react-query can do to limit the number of mutation calls?...

passive-yellow

12/12/2022

Can't get testing library tests to work

Hi, I seem unable to get any tests to work where I test a component with useQuery. I looked at how useQuery itself does the tests but even that didn't help. My pages have a loading prompt and tests always fail because no matter how long my timeout is, screen always contains that prompt rather than actual data. This is what one such test looks like: https://github.com/Makistos/suomisf-ui/blob/master/src/features/publisher/routes/publisher-page.test.js ...

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