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
useQueries & queryOptions typing issue
Anyone else running into issue with code similar to:
```
const queries = [...
Prevent react query from creating empty keys even happening when enabled is not satisfied
Hi,
I've find some weird case with useQuery, where create two keys while fetching, where the first is the one with the data is empty or undefined.
So in simple terms I have two keys like
...
Will calling mutate trigger Window Focus?
I put a Button in a Popover component. The click event is to call the mutate method of useMutation. After clicking and requesting, the Popover automatically closes.
Some piece of code is setting the wrong value in the cache, and I can't figure out which one it is
I have around 20 different callsites where I
setQueryData on a key. While I could go over one by one, comment them out, then comment them back in, is there a way to kind of get in between and print the stacktrace of all setQueryData calls, and which value it is setting the cache entry to?Using react/query for non-async/global store.
Hey all I am attempting to use React Query to store some positions I am calculating onLayout.
```
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
export const useGetLinePositionById = ({ id }: { id: string }) => {...
can you force clear the cache of specific queries?
I have a few large queries that cause an out of memory exception. Wondering if I can manually/selectively clear their cache instead of clearing the entire cache
React query selectors for useInfiniteQuery that return extra properties aren't recognized
Created a playground below but I'm basically trying to have a selector that returns a flatmap of a response. However it keeps throwing an overload error or says the property I created doesn't exist or when I add all the properties from the data response + some extra information, then TS doesn't recognize the extra properties.
I'm using TS vs 5.1 and reactQuery v4 (though on playground it's reactQuery v5)
https://www.typescriptlang.org/play/?target=6&ts=5.1.6#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE84BfOXKCEOAcinQEMBjGAWgEdyVFgFgAUOJiUw6OACV0qSNgxwAvInFxtcRgHdUALjioYUAgHMA2gF1xNcVwgr4SACYcYHWupQYc+ITEZBSUADwKSs4YAHwAFAhaOoKhANLolMZWLASBRKRClCw2ADRJ2ilUAGLYxnEAlOoxcAAKjCDAGAB07KgQADYAbugJ+kZwVgBEABbAkzY09WViOibo-eg8dR5ejWrNiSurOk4uuhAGvjscXWAcFopduP2eALIcYHF3D01w3+g9C6oADc5WOAHpwbp0DBkFBsIgxg4jsdobD4YigcjVsjFuJ8WJTqZEHBrsZPMRwDAAEw+DRoLB4Aj5EJUCKKZSxBJgyqUdKZCY5JlBAqhYrLVa8mp1PbNNpMToA3oDYajIFZGZzBZLMEYDZbOBxa6yzQo45E+BjK6eG7-VBPF4wd6ff6-f6Agygs2rSFouEIhBIsGrdjogPB1F-e6KYzXW7R1ASyOrf4tDhQDggcZx1PpzOJiOosaF2hg3H1cQU9BU6kAfg9qDgvqtbggimwLHg6AAHp0YABCIA...
Is it possible to detect when a query becomes "inactive"?
I need to perform a specific "cleanup" action when a query is inactive (ideally also when it's garbage collected). Is there a convention to track these states?
RQ architecture suggestions
I'm having a bit of a dillema on how to structure my queries. I really love using queryOptions as it lets me override any of the options.
```js
export const getProjectQueryOpts = (
variables: GetProjectRequest,...
useQuery results in having this error: TypeError: url__WEBPACK_IMPORTED_MODULE_0__.URLSearchParams
This is my first time using react query, and I seem to be running into some difficulties, some help would be appreciated.
I have an api endpoint that when I call manually, results in valid data being returned: (see screenshot 1)
The code for this in short is: ...
local state of the api data
I get some data from the api using useQuery but I need to modify it until I hit the save button (same as a form but it's not). Is it a good practice to use setQueryData to update the data and then call useMutation with the modified data in the cache
For instance:
I get an array thanks to useQuery, I add an element with my form...
How to enable a query for a specific query param
I have a GET endpoint, in which the values for the query params are passed in as arguments to the query, e.g.
```tsx
function useGetItems(debouncedQuery: string, id?: string) {
return useQuery({...
Prefetching and Nextjs Loading.tsx not in synch.
I'm facing a weird behavior where I believe the prefetch hasn't finished yet, but nextjs loading is done. Resulting in a blank page for a second before the content shows on my screen.
Typed cache
I was wondering if we could do something like typed "cache".
Kinda like what router does with loaders.
Our app has grown quite a bit and mistakes in form of key collision happen now.
I would like to tie query keys with data type so that mishandling would error in typescript or at least being passed down to the useQuery data type with a union....
A query that was dehydrated as pending ended up rejecting.
When ever I get a error from the server I get this in the development. Not sure what I am doing wrong here.
...
hydration-error-info.js:63 A query that was dehydrated as pending ended up rejecting. ${QUERY_KEY}: AxiosError: Request failed with status code 500; The error will be redacted in production builds
hydration-error-info.js:63 A query that was dehydrated as pending ended up rejecting. ${QUERY_KEY}: AxiosError: Request failed with status code 500; The error will be redacted in production builds
How to avoid double fetching in parallel server components. How to make use of caching
I want to fetch my data only once instead of twice when I load data that I use on the server to redirect and then pass down as initial data to my client components.
A lot of sources say it is a bad practice to pass down props from a layout.tsx to the children. So it is no option for me to fetch in a layout.tsx file and pass it down to the children. Also while trying this I experienced a few errors. Here a few sources to that: https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13/77983273#77983273
So how can I make sure it's not refetching twice if I have two parallel server components? The
await queryClient.prefetchQuery({ is no option as I need to access the data as it is dependent.
| App...Issues with testing running for 5 minutes are tests have passed
I have encountered an issue in the useActivity.test.tsx file that results in Jest tests hanging indefinitely after completion when running the command npm run test-ci, which executes the tests with the flags --ci --coverage --detectOpenHandles. This behavior leads to the "Jest did not exit one second after the test run completed" message. Upon investigation, it appears that the problem arises from my handling of asynchronous operations within the test cases.
Investigation Details
Test Behavior: The tests complete successfully in approximately 2 seconds when run normally; however, there is an extended waiting time of up to 5 minutes when executed with the npm run test-ci command. This indicates that there are unresolved asynchronous operations or pending promises, which I have not addressed properly in the test code....
UseQuery with "now" in paramaters and refetchInterval
I have a useQuery call where the promise callback parameter requires a current timestamp value that we provide with Luxon's DateTime.utc().toISO(). As this value changes every millisecond the query also fires off as fast as it can go. To circumvent this we need to use a useEffect with a setInterval in it that sets a state. I have the feeling there could be a better solution around. As the param changes the query fires so adding a refetchInterval of a minute to the query adds more oil to the fire...
setQueryData does not pass existing data
I'm running into very strange behavior where calling
setQueryData does not include the existing data in the updater callback.
```
queryClient
.getQueryCache()...How to trigger data fetch on button click
Say I had 3 buttons in a UI a green one, a blue one, and a red one.
- When I click the green one, I want to fetch data for 'Bulbasaur' from the pokemon api.
- When I click the blue one, I want to fetch data for 'Squirtle' from the pokemon api.
- When I click the red one, I want to fetch data for 'Charmander' from the pokemon api.
...