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

rival-black

7/25/2023

Where to put QueryProvider for NextJS SSG pages?

I have NextJS app (with app router). I want to use react-query inside some components on the static generated pages, as well as in completely "use client" pages. Is there a way to do that?...

correct-apricot

7/25/2023

useQuery calling API twice for the first page load.

I am using react v17 and I am facing this issue whenever the component is rendered for the first time. I have set the staleTime to Infinity and refetchonmount to 'always'. So when I referesh the page, it sends an API call and then it sends another API call. The workaround that we did is to cal refetch inside the useEffect and set the enabled to false for that query.

optimistic-gold

7/25/2023

Infinite query invalidation: pages revalidate serially

I have an infinite query, which I'm attempting to invalidate. By default it invalidates all active pages, which is good. Unfortunately, it's loading them serially. So if I've scrolled down far enough to have loaded page 4, react-query is basically doing ``` await fetch("/data?page=1 await fetch("/data?page=2...

wise-white

7/24/2023

Resolve mutation after invalidating queries

``` const { isSuccess, isLoading, isError, mutate, data, error } = useMutation( async (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); //fetching some API here...

sensitive-blue

7/24/2023

How can i add action buttons to rows (like `delete`)

I need to create a table that would allow to delete rows. Is it okay to just move colDefs into react component and call function passed as a prop on a button click? ```tsx type ClientsInputProps = { clients: NTPClient[];...

sensitive-blue

7/24/2023

NextJs 13 server components with ReactQuery

The react-query has been a smooth experience when I used to work on reactJs. In nextJs13 (appdir) especially for server components, I have seen many work around for its implementation like hydrations and some other methods. But it is still not a pleasant experience. Wondering whether React-Query would be able to achieve the similar smooth experience as before ever, or should I hope more for useHooks to also come to server components;....

automatic-azure

7/23/2023

Auth with JWT and refresh

hello, i am trying to use react query with jwt and refresh token, so i found this in the internet, but i think setting the authorization header is messing, so i only have to use some state management and set the authorization header in axios interceptor right ? ```js import axios from 'axios';...

probable-pink

7/23/2023

Cache contains duplicate data somehow

I have a useQuery like this:

``typescript
function fetchMessages(dmID: number): Promise<Message[]> {
  const data = await fetchWrapper(

/messages?dm_id=${dmID}`)...

other-emerald

7/22/2023

useQuery does not emit data to parent when useMutation happens in child

```js export function setNewCart() { const {setStorageItem} = useAsyncStorage(); const queryClient = useQueryClient(); ...

continuing-cyan

7/22/2023

How to type 4th generic of UseQuery

Can s.o help me to type 4th generic(any). I could not solve this problem.

statutory-emerald

7/22/2023

Is it a good idea to call multiple API's from the loader function?

I am working on a Solo Project, making a Crypto Directory Project. I need to call multiple API's on more then one pages to collect data, is it preferrable to call more than one API from the loader function instead of calling them inside your component. PS: I am using TypeScript, would love to hear your thoughts on the return type of the loader function and tips to avoid warnings and error while coding....

afraid-scarlet

7/21/2023

Validation in Formik of data coming from React Query

I've got a controlled Dropdown component where options and a possibly selected (default) value comes from my backend. So after retrieving the options and selection those values are stored in react query. Now I want to validate this dropdown (has an option been selected or not) via formik which holds its own data store for validation. So I have two competing stores: react query and formik which needs me to utilize its own store for validation. What is the idiomatic solution to solve this? Do I have to use a useEffect to sync the state from react query to formik or is there another, more elegant way? ...

extended-salmon

7/20/2023

Mutation in provider

I'd like to save some database bandwidth so I decided to debounced the save. I'm passing the localstorage version of my data to children of provider and mutate on debounced value after 3 seconds. The problem is after 3 seconds the mutation is triggered and cause a rerender of my provider and all the child components, which is an huge performance issue. ...

sensitive-blue

7/19/2023

Devtools says no queryClient provided.

Hello, I'm trying to setup the provider and the client, but the devtools says that no client has been provided, But I have provided it though. Any idea what's going on?

foreign-sapphire

7/18/2023

QueryFn is by default on pause and not executed

Hello, for me it works, however for my work colleague on mac using the same node version and chrome version we get different results. We are not using any cache provider, but somehow the query is not executed for him and marked as paused. For me it is executed without issue (on Ubuntu). What could be reasons for that? The hook looks like this: ```ts...

foreign-sapphire

7/18/2023

How to keep placeholder data if the initial fetch fails

If the initial fetch fails, is there a way to keep the placeholderData (note, i cant use initialData as it messes up with my stale time option) instead of data becoming undefined. I want placeholderData to be empty array, but as soon as the fetch fails, it becomes undefined which breaks my UI. No matter how i structure my query function, the data always becomes undefined and I have to use conditional chaining.

foreign-sapphire

7/18/2023

How to efficiently handle erros if there are multiple useQuery calls on the same page/component?

When I have multiple useQuery calls on the page(lfor example when there are api calls for dropdowns as well as main list), I want to alert user if any of the api call fails via a toaster alert with a dedicated message. What is a better way to handle errors in this case, if using onError callback is soon going to be deprecated. Do i write multiple useEffects? Also I cannot tear down ui by putting checks on error state for each of the drop down api error case...

foreign-sapphire

7/18/2023

Should you use useQuery to populate multiple filter dropdowns on a single page?

1. I have list data with multiple drop down filters. Some filters are independent, some are cascading(meaning dependent on some other filters selection) Does it make sense to use useQuery for fetching data for filters apart from the main listing api? 2. When I have multiple useQuery calls on the page(like the above example where there are api calls for dropdowns as well as main list), I want to alert user if any of the api call fails via a toaster alert with a dedicated message. What is a better way to handle errors in this case, if using onError callback is soon going to be deprecated. Do i write multiple useEffects?...

foreign-sapphire

7/18/2023

Suspense example has a bug?

In this example https://tanstack.com/query/latest/docs/react/examples/react/suspense it never shows "Loading projects..." even though it has that in line 73 in the sandbox: ```ts <React.Suspense fallback={<h1>Loading projects...</h1>}> // ......

fair-rose

7/17/2023

Infinite queries fetching behavior (and preventing duplicates/missing data)

I have been looking at the following portion of the docs that talks about how all pages are sequentially refetched when the entire infinite query needs to be refetched. I am curious to how react-query handles fetching new pages. Do previous pages also get refetched? For example:...

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