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
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...
Am I supposed to trim or filter undefined / null / empty strings from query keys?
The UI might not always have optional variables passed into the query key, so the result would be
["foo", "bar", ""] or ["foo", "bar", null]
Is this okay? My first assumption is that - it is fine and it would be more overhead to filter falsy values out....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.
...
Call setQueryData() from the backend
I see I can use query on react frontend to simplify how to getting data, but at the end of the day it's always the backend that know when the data has been updated (based on some logic).
And so the frontend cannot make assumptions on when the data in the cache is fresh, lor not.
The simplest solution would be that the backend has a function to invalidate data to the query for the frontend (or to set new data inside).
But calling setQueryData from the backend has no effect.
I found some doc saying I can implement a custom solution using SSE to inform the frontend that a query should be invalidated, but I would say that this need (I think it's a general need) should have an out-of-the-box solution....
Understanding .refetch() and error retry behavior.
Hey there,
I have a query where I am awaiting .refetch() and then using the resulting data from it. I am wondering if in this case React Query does the retry behavior on failure, and if so, if that is included in the await for refetch....
Trigger refetch/rerender after setDefaultOptions
```
useEffect(() => {
client.setDefaultOptions({
queries: {
meta: {...
should I use getQueryData in this use case?
Hey,
I have multiple calls to a same useQuery hook, I have set a staletime to 5000ms because I need to refecth the data sometimes, but in one place of my app, I only want to get the data from the cache without fire an api call no matter what (even if the data is stale), I know that some data will be in the cache when I reach this point, should I use getQueryData in that case?...
How to make useMutation non-blocking?
I'm trying to move over from startTransition for a few mutations but I can't seem to figure out how to make the UI non-blocking if I click to trigger a mutation and then want to trigger another mutation. How can I achieve the non-blocking features of startTranstion when using useMutation?