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
useFocusNotifyOnChangeProps is not fresh after re-focus
Hello!
In react native I have a screen where I load data with react-query. When it's out of focus I would like to not refresh the data.
I checked the useFocusNotifyOnChangeProps as docs said, it works well but something is missing.
...
How Does removeQueries work with placeholderData:KeepPreviousData??
Hey everyone. I'm trying to build an application where user can have business accounts. Business Account are what drives the 90% of my application. Change in Business Account should remove all the cached queries and fetch settings data to provide globally. The Issue I am facing is with
queryClient.removeQueries and placeholderData:keepPreviousData. Every time I switch business. All the cached data get's removed but the page that I am currently In uses the previousQuery data until the data for the new business resolves resulting into isLoading being false and isPlaceholderData being true. What I want is to show Skeleton in every places when ever the business get's changed.
Here is a minimal reproduction
https://codesandbox.io/p/sandbox/demo-4wvwr4?file=%2Fsrc%2FApp.js...Pagination with infinite query...
Hey everyone... i'm thinking to use infinite query to retrieve data for a table with pagination... but probably is not the right choice because if i go back my pages result
grows up... what am I doing wrong?....
for example if i look this:
```
useInfiniteQuery({...
Pages is undefined with infiniteQuery when data is empty array
I have the following infiniteQuery:
```tsx
export const shopListingInfiniteQueryOptions = (queryParams: ShopListingSearchInputDTO = {}) => {
return infiniteQueryOptions<ShopListingOutputArrayDTOAPI, AxiosError<ShopListingOutputArrayDTOAPI>>({...
Is `useOptimistic` relevant if use use react-query ?
I mean the useMutation hook covers the same thing, right?
useQuery returns "loading" while data is already fetched
hi
can anyone explain me
i have a query
```const useSomething() {
return useQuery({...
How to update a pending mutation
I'm currently facing a scenario where I'm using a QR code scanner that triggers an axios.post request on each scan. To optimize responsiveness, I've implemented onMutate to proceed without waiting for the API response. However, I also need to allow users to edit this information even when offline.
The current online workflow functions correctly: upon scanning, a toast appears, and clicking it redirects the user to a form where they can edit the information. However, I'm unsure how to handle offline scenarios where I might need to edit a pending mutation.
Any insights or suggestions on how to manage offline edits alongside pending mutations would be greatly appreciated....
Cache is not updating
I wrote this code based on what I read at https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updatesI have a table component that has pagination that inserts the page number into the url and whenever I go to the second page and make some interaction to update the data, the data is not updated instantly, only if I reload the page. Once this happens the data is never updated again, even on page 1. I tested it before by putting an await refetch() in onSuccess and it worked correct...
Stuck in fetching state if user changes page while fetching
Not sure if this is a bug or something I didn't configure properly but when a user changes the page while its loading, the query gets stuck infinitely in the "fetching state"
This is what I have in my query provider, I've been playing around the settings and I just can't figure out what's causing this annoying issue
I'm on v5.45.0...
best way to handle errors of api that returns status 200 w error field
Is there a better way than an if / else condition onSuccess if your API returns 200 for errors ?
my api returns always a 200 with fields { data, errors } and I would love to be able to get the errors in the onError() method...
is it okay to use tanstack query cached data globally as like context
I am using react query cached data in my mostly all component when I need that fetched data. So is it safe to use to cached data instead of using context?
is useQuery better than useInfiniteQuery for Infinite scroll table serverside search,filter etc.?
I see useInfiniteQuery basically just keeps the previous data and you request next page, but when you do serverside search-sort-filtering, you of course do the last page search-sort-filtering, because you only know the lastPage, isn't useQuery basically better in this case with some adjustments on serverside? at least it doesn't duplicate items that way. or what i'm a missing?
Registering a global Error, doesn't work
in my react-query-error.d.ts file,
```
declare module '@tanstack/react-query' {
interface Register {
defaultError: AxiosError<ProblemDetail>;...
I have a useInfiniteQuery fetches the same duplicate data for the first 2 requests
Is there a scenario where a duplicate fetch of data would happen when using useInfiniteQuery?
Mutation context in offline mode
Hi, does anyone know if it is possible to access a mutation context without it being resolved yet (offline mode).
I'm creating temporaries ids on my onMutate callbacks that i then put on my query context (offline mode) and i'd like to access it even though onSuccess / onError / onSetteled have being called as I'm offline.
This is how my mutatinon function looks like, it is made to handle offline mode...
executing enabled false query
```
export function getAssistantOptions(id: string | null) {
return queryOptions({
queryKey: ['assistant', id],
queryFn: () => console.log('log'),...
How to use useQueries
Is this the correct way to combine two get requests with useQueries?
```jsx
export const useDashboardData = (setupId, days) => {
return useQueries({...
Tanstack Query pageParam typescript, readonly
This is my code:
```
const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery<
PropiedadesResponse,...
setQueryData + refetch vs fetchQuery
I'm reviewing a PR that has setQueryData + refetch (page uses useInfiniteQuery)
```
queryClient.setQueryData(queryKey, (data: any) => ({
...data,...
container shrinking when loading
I load a different api when some state changes.when i change state and api starts loading,my container becomes empty and shrinks in a way it has no data then immediately gets new data.
It is a disgusting design for the user's eyes so how can i prevent it?(I want to show something like a spinner but that spinner isnt guaranteed to be the same height as the previous data of the container)...