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
in useMutation, how to get error status code inside onError?
```ts
const {
data: getPricingData,
isPending,
mutate,...
Query reloads
Hey, My App reloads all react queries every 5 minutes even if I'm continuously interacting with the app. Struggling to find the root cause. Any pointers to debug this further? Below is my client configuration
`export const queryClient = new QueryClient({
defaultOptions: {
queries: {...
I want to mutate every time the user interacts with the form. useQuery & useMutation cause rerenders
Hello, this is my code: https://hastebin.com/share/iqecihusab.javascript.
I have :
```ts
const {data: businessDetails} = useQuery<EntityDTO<BusinessDetailsEntity>>(
'getBusinessDetails',...
Avoid refetch on initial load
We have a main grid that is driven by a selected node in a navigation tree. Because
selectedNode is persisted on the server and because the resources are slow/expensive, we load both asynchronously. However doing this means the grid is aborted/refetched (or refetched if the grid finishes first) when selectedNode gets set so we're wondering if there's a good way to avoid triggering a refetch for that first load?
```tsx
const selectedNodeId = selectedNode?.id
...Accessing react query without hooks
Hey,
i would like to implement a expo background fetch (with notifications when api data changes) inside my expo app, but i realized that i cannot use the normal query hooks (useQuery etc.) inside the background callback. What would be the right way to get and set data inside the query cache, when the hooks are unavailable. If there is any (other than just "hard" accessing the cache directly)...
Bi-direction infinite scroll table with maxPages - uncontrolled scroll
Goal I would like to build a table with bi-directional infinite scroll where only a few pages are stored in the cache at a time. So as a user scrolls both up or down, more rows are fetched when the user scrolls to the top or bottom and the newly fetched rows replace old rows in the cache.
Problem When I use
maxPages to control the cache size, I encounter an issue with scrolling. On scrolling up/down, sometimes the table continues to scroll well beyond how much I actually scrolled on my mouse wheel. It's as though the browser takes over and decides it's going to keep on scrolling until it hits the end of the table. If I don't set a maxPages argument though, the scroll behavior is as I expect. That is, the table scrolls based on how far I scroll, and doesn't get caught in a continuous scroll.
Reprex I have a code sandbox that illustrates the problem. Commenting/uncommenting maxPages (no other changes) results in the two different scroll behaviors....Colocation of queries and qpi calls related to components.
wondering if anyone has any thoughts / resources to look over. I have an app that is more or less a dashboard. maybe 20 - 30 components with data that needs to be fetched, some related some not. Currently I have an api folder with an
index.ts and queries.ts each with the 20 - 30 respective api calls / react-queries. I am trying to optimize a bit, reducing api code, but also restructing the app to make it a little less cumbersome and more readable. Looking for info on where to place the queries and associated api calls, instead of one huge file. Would you break them up and keep them inside of an api folder still, or go a step further and put them under the component's folder, ie.
```
/TopApplicationBar
|-TopApplicationBar.tsx
|-TopApplicationBar.module.css...onSettled throws annot update a component (`HotReload`) while rendering a different component
Stack:
"next": "14.0.4"
"@tanstack/react-query": "^5.17.12"
I have server component that is prefetching data and storing in cache. Then i have mutation that is updating the state which is OK until i add this line of code:...filtering, sorting and pagination
As my task app is getting more complex, I need to add the ability for users to filter and sort. I want to also be able to create persistent views for the user. Since the number of tasks is large, in order to have a good UX and low latency, I also need pagination. Currently, task interactions like status changes, due date changes, etc. are all optimistically updated and it is a great UX that I wish to preserve.
Q1) Given there is a requirement for pagination, 1) filtering and 2) sorting will need to be implemented on the server right?
Q2) Assuming (1) is a yes, how should this be implemented exactly? Any examples of what these parameters for filters and sorts should look like would be super helpful. I don't want to reinvent the wheel....
Can we change staleTime and cacheTime via props or state change after query is mounted?
Are these example custom hooks implementation valid for v3/v4/v5?
1. Change stale time or cache time when query key changes in custom hook implementation
2. Change stale time or cache time without changing query key
3. Different custom hooks set different staleTime value on same query key
...
Since v5 deprecated onSucces and onError callbacks is okay to implement a custom hook like this ?
export const useInviteAdmin = () => {
const queryClient = useQueryClient();
const { enqueueSnackbar } = useSnackbar();
return useMutation({...
I have a problem with authentication using React Query.
Hey guys, a I'm newbie in React Query but i want to convert my app from Redux Toolkit to React Query. I want to save data when user click submit button in login form and after that change app to authenticated version in my root component. I don't know where i am doing something bad, but i have always my token undefined. I am hoping that you guys help me <3.
import { useMutation, useQueryClient } from "react-query";
import axios from "axios";
...
React Query not respecting initialData when there is cache
I have a cart state stored in the cache with the key "cart." When I try to fetch cart information on the server and send it to the client using initialData, the server's data is not replacing the existing cache.
Is there a way to make initialData overwrite the cache?...
Safely setting store state based on query data/status
We have a main grid component that is effectively the most important component in our app - the entire rest of the UI depends on knowing when it's loading, has data/is empty, etc.
We're using a zustand store to hold a few basic pieces of information, but we need to set this information based on the results and status of the react query.
However, we can't directly set the store values in the below example because on initial render that would trigger the dreaded react error "Cannot update a component while rendering a different component"...
Same queryFn for multiple useQuery calls?
I am trying out react-query for the first time. Watched a couple tutorials and wow does it seem super cool!! My question is for
useQuery, if most of my get calls are all basically the same but just call a different backend route, getUsers, getCustomers, getCategories etc., can I just use the same generic function?Understanding frequent network calls
I'm currently working on an application for my company, and we're using Tanstack Query, and there are some questions/concerns about the amount of network calls that happen. I was reading this section of the docs (https://tanstack.com/query/latest/docs/react/guides/important-defaults?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Fguides%2Fimportant-defaults) and just need some clarification.
So we have a task board that uses
useInfiniteQuery to get all of the tasks. When you click on an individual task, the search params are updated to hold the id for the selected task and a modal appears that makes a call to a useQueryto get the data for it to display. Is it expected that opening this task modal would also trigger a network call for our /tasks endpoint that is called with our useInfiniteQuery for the whole task board, even though nothing about the board has been modified?...
Component not re-rendering on removeQueries()
I have a
FlatList with items. Lets call them FlatListItem.
I am using memo to memoize my Items to prevent them to re-render when the parent changes using export default memo(FlatListItem);
For each FlatListItem in my list I have to fetch data. In a separate file I define a hook and a query function. Simplified they are looking like this:...Best practice for dealing with mutation function that doesn't error
Hey all,
I have a useMutation that wraps a function that returns a type like follows:
```ts
type Return = {...
Why do PATCH and DELETE requests not refetch the data from the database?
Hello!
When I store data in the database, I usually do it the following way:
```js...