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
Using queryClient as a useCallback dependency? Possibly dangerous?
Hi all.
Chasing a very frustrating bug in production. We noticed occasionally our users would submit 20k requests in under a minute, effectively DoS'ing us. We're adding throttling etc, but I want to track down WHY they are sending so many requests. We think it's due to invalidation of some query keys, causing refetches to happen.
I cam across this code:...
Initializing/synching Zustand stores with React Query
I know that we typically do not want to sync React Query data to Zustand, because React Query already does a good job of managing server state. But I was wondering if there is anything wrong with using React Query data to initialize a Zustand store if we know that we need to change the data locally before saving it back to our database.
For example, I am building a bulk email tool that lets you select multiple recipients using a virtual table. An email draft may already have some recipients selected, so when the page loads I want to fetch the email and initialize a Zustand context + store using any existing contacts from the email. Once this is done, users can select/deselect contacts in the table, which Zustand manages, and if they hit Save then I use a React Query mutation to update the Email in the database.
The code looks similar to this:...
React Query support for node 14.15.0
Im currently on node 14.15.0 and using create react app javascript which react query version will it support???
Get useMutation options type
Hey there! I'm trying to put a useMutation call into a custom hook to define explicitly the types. I want to pass the useMutation options to this new hook and then send all those props down to the original useMutation with the same types it figures out. I peeked at the type definitions, but it's not working like I thought it would. Any tips on how to make this happen?
Current code:
```JSX
async function deleteFormRequestQuery(id: string) {...
Perform the refetch automatically
Hello,
Is there any way to perform the refetch automatically?
For example: I have a page in my application that the user spends a lot of time on, would it be possible to renew the data when it becomes stale, automatically? It turns out that 'refetchInterval' is not working well, because every time the component is remounted, it is restarted, which doesn't happen with the stale time.
In my case, the ideal would be for the time to count from the last successful request, instead of restarting each time....
Select, structuralSharing and 'global' stability
If I run a non-select query twice, the returned data will be identical, globally.
```js
const { data: d1 } = useNonSelectQuery()
const { data: d2 } = useNonSelectQuery()
...
See if data came from the data persister or from server
Is there a way to see if the query data came from the data persister or the server? I would like to show a warning to the user if the data came from LocalStorage.
Query invalidation problem
I have an (infinite) query with the key:
["structure", "detail", projectId, parentFolderId, searchParams] where parentFolderId can be string or undefined.
One example of such a query key that's stored in the cache is:
```
[...Make another fetch call if the first one returns no data.
I'm making a fetch call to out backend API with data of the location of the user. Either 1. We get results and show them to the user "Here are some results within your area" or 2. There are no results within the location the user specified.
If 2, there are no results, but the fetch was successful. We want to make another fetch call, this time with specified location data to show the user "There was no results within your specified area, but here is some results outside of your area"
How do we do this in the best practice way with react-query? ...
How can i access the cookies when i use Server rendering - NEXTJS 14
I'm trying to pre-fetch some data needed for the layout, I followed the guide on this page: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr,
I have a setup just like the page mentioned above using the NextJS app router. however, I need to access the server state to get some data from the cookies to send the request, which I cannot get in a client component.
I can get the cookies in the server component, but not downstream in the client components....
setting the selected value in a dropdown to the newly created value
I have a select which shows a list of views. When I create a new view, I want the selected value in the select to be the new view. I don't need it to be optimistic since it would be a bit of an overkill.
Should I be storing the state of the new view from the response (in
newView for example) until the refetch of the views and then set the state of the selected view to the view with the id newView? Any other approach?
If it were optimistic, what would the approach be?...Use enabled prop for type narrowing
Simple question: Would it be feasible to use the 'enabled' prop to narrow down the type of variables used in the fetch function?
Codesandbox to show the issue:
https://codesandbox.io/p/sandbox/billowing-thunder-qwdy98?file=%2Fsrc%2FApp.tsx%3A2%2C37...
How to NOT refetch/retry failed queries?
Hello, I have some problems when fetching pararell queries. I send n number of queries and some of them might(and do) fail. The issue is that for some reason, these failed queries OCCASIONALLY get "pending" status, which is bad because I render loading state when at least one of queries is pending. In browser's network tab I see that I refetch these previously failed requests, but don't wanna do that. How can I achieve it?
```
useQueries({
combine: (results) => {...},
queries: dates.map<UseQueryOptions<SlotsSuggestionsResponse>>((date) => ({...
all fetched pages get set to the same value as page one using useInfiniteQuery
When hitting back button and returning to a page using useInfiniteQuery, each array/page already fetched will get updated to the result of the first page fetch. This occurs when navigating back using the browser back button.
isPending equivalent for queryKey change / bool that distinguishes background refetch from qk change
Hi guys,
Building a UI right now which is fetching data via an API using useInfiniteQuery. I'm swapping parameters in the queryKey to automatically fetch new data via the API when sorting or filtering parameters change. So far so normal.
These fetch operations are super expensive and slow so I have a loading state rendering in the UI when a filter or sort condition is applied. Originally I had this keyed to isFetching but I've noticed that it's blocking the UI when a background refetch is in-flight, which is absolutely not what I want. For various reasons it's not appropriate to configure a high staletime value on the queryCache and background refetches are important to keep data updated. However because the API is slow I can't sacrifice my loading state when a filter or sort condition is applied....
Why is my page not refreshing?
I must have a failure in understanding something. Some things refresh, some don't and I can't understand why. I have a page that consists of "main" data and some sub components. Main data is "work" and there are "editions" on page as well as a log of changes. Work and edition data can be changed, log should be updated automatically after this.
When I edit work data, that changes automatically, but log only if I refresh the page (by switching windows for instance). If I edit edition, it also requires a refresh, not even edition's data is changed automatically.
Edition info is loaded with the same query as work while logs are loaded with their own useQuery() call but they have the same queryKey.. Both dialog's have exactly the same queryClient.invalidateQueries() call in their hide function. Looking at the states they stay stale in the problematic cases so it's not just an update issue in React....
filter, sort and group
I want to be able to filter, sort and group tasks. Given that the number of tasks is large and ever expanding, pagination is also required. Are there any production examples of doing all filtering, sorting and grouping with pagination in react query?
Even without optimistic updates, grouping and pagination is making it fairly complicated....
What is best way to compose queryFn options for server and client in SSR
Just want to know what pattern you guys follow for queryOptions that will work and client and server while preloading.
For example If I am preloading query on server it should call database directly and on client it should fallback to api route...
`replaceEqualDeep` returns 'b' if 'a' is [undefined]
I created a reproduction in this typescript playground: https://shorturl.at/txGY9
(The link is reliable, I shortened it to avoid hitting the character limit)
If I run this code:
```...
b.call is not a function
its throwing unexpected i.call is not a function and sometimes b.call is not a function but it does nt affect the functionality
everything works fine as expected
https://github.com/AJAY0993/Shop.co...