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
How to do Optimistic updates with useInfiniteQuery?
Does anyone have an example with Optimistic updates for useInfiniteQuery?
Like the basic CRUD stuff
The biggest current challenge for me is when you are deleting items (like, let's say you have a
getNextPageParams with a limit of 10 items and you are already loaded 50 items (5 pages), then you are deleting 1 item on page 2, and it means that all items inside "page 3", "page 4", etc should "shift to the left" inside our optimistic update, so the "page 2" will contain 10 items)
So, if someone already have a working example it would be huge for me!...Is onSuccess recreated on each render?
I have a custom mutation hook like this and I was wondering if there could be any cases where
prevHemoglobinValue would be outdated in the onSuccess callback?
```js
export const useEditHemoglobinEntryMutation = () => {
const dispatch = useDispatch();...onMutate and TS
I'm trying to make an optimistic update on a query. but the
newQuote param on onMutate states that it is of type void? But printing it clearly reveals that it is of type TrackdayPlannerQuoteResponse.
```ts
return useMutation<TrackdayPlannerQuoteResponse>(
(data) =>...React warning after removeQueries
I am using RQ to infinite cache results of API by id of element but want re-fetch if user goes to another if and back.
e.g. if we multiple times query with id=1 API is called only once, but once we go to query id = 2 and back I want to re-fetch.
Here is code snippet
const useMyData = (key: string) => {
var queryclient = useQueryClient();...
How to type pageParam in useInfiniteQuery hook?
I was wondering what's the suggested way to type
pageParam in useInfiniteQuery hook?
I'm doing it currently this way, but maybe there's a better way:
```
useInfiniteQuery<FetchStuffResponse>(...wrap use-query in hooks?
Hi There,
Let's say I have an entity Post, I would normally make a useGetPosts() hook and a usePostPosts() hook. But would it be a better idea to just make one usePosts() where I export the useQuery and useMutation? Or should thoose two modules be separated into it's own hooks?...
Refetch interval and stale time?
Is there a point to setting both the
refetchInterval and the staleTime, or do those effectively accomplish the same end behavior?Use mulitple `queryClient.prefetchQuery` in parallel
Hi is it possible to have multiple
queryClient.prefetchQuery in parallel in getServerSideProps?Improve Pagination
Hello!
I'll like to have a help with my pagination implementation; my backend doesn't provide any data to make pagination simpler. I have the option to paginate with offset and with a cursor. I'm using offset pagination and my code looks like this:
```ts...
map inside Dependent query
Hello,
I'm trying to do a dependant query but mapping the const
balance which is equal to [1,2], but I haven't been capable.
I've tried even with the parallel query notation that looks pretty similar to what I'm looking for, but it must be a dependant query, indeed. Could you help me?
...Selector for rejected promises
Hi, is there a way to select and transform the body from an error response,
If I get this from the API:
{ result: null, error: { message: "something is wrong" } }
and I want to select the error object from the response (so the react query error object would be just { message: "something is wrong" }), I know we can pass a select callback to transform the result when the promise success, but I don't see something like that for rejected promises....Using useMutation mutate params as mutationKeys
Is there a way to extract the params to use in the options?
```ts
const useQrCodePrintPostMutation = () => {...
Chained query
Hi,
I am trying to find a way to use react-query to make a set of queries where the URL of the next query is part of the previous query response.
Eg: API response for first query will be like...
clear cache on error
Hi, currently when a query fails, it would contain
error and previously cached data .
This is undesired for my use-case, but I can't figure out a way to achieve that.
To be clear,
Expected: useQuery only returns error but no data when the request fails....Using axios with RQ
I use RQ with axios (with a
validateStatus < 500 and using error boundaries a fair bit) and I was just wondering if (more seasoned) RQ users tend to use an axios response interceptor to wrap/decant the axios response into a custom data structure for using in custom useQuery wrappers etc.
Cheers!...useQueries - adding a queryKey or any way to mark the result?
Hi ALL!
Have a question if there is a way to mark the queries somehow?
I have written a useQueries hook that fetches images from our API ( behind a Auth header, that's why I'm fetching the data blob ). The data for the items ( ids, names, diff. info ) is passed down from a parent component ( MUI Stepper Dialog uses the data ) and I display it in a list with the item data ( as a 'preview' that gets sent to our API to be printed )....
queryClient.getQueryData is undefined once refresh
Is there a way that it will fetch the data once refresh?
1. Fetch list of data in index page
2. Go to create new page
3. Refresh the create new page...
Is there built in debounce feature?
Hi, I have two components that use the
useQuery hook with the same key practically at the same time, and I noticed that there's still only 1 request to the endpoint. Before I added react-query to the project there were 2 request which is bad of course.
I'm not sure why it is happening. I haven't changed defaults, so staleTime must be 0, right? So why I see only 1 request?...optimistic *delete* with infinite query
What should I do if I want to implement optimistic delete? For example:
- My page size is
10. In getNextPageParam, if the length of lastPage is less than 10, then return undefined to indicate that there's no more data.
- The first page is loaded
- I delete one item, setQueryData with 9 remaining items...Notifications and live updates - are websockets the best way to do it?
I am adding notifications and live updates to my react app. I currently use react query for server state management on the frontend and mongo + mongo app services (realm) for the backend. Have setup an api that the client can subscribe to and thinking of following what TkDodo has mentioned in his blog post https://tkdodo.eu/blog/using-web-sockets-with-react-query. Is this the best way to do it or would you recommend something else?