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
Struggling to build a PWA with react-query
Hey guys! I am using
PersistQueryClientProvider with localStorage. I have this specific use case where I have refetchOnWindowFocus enabled, which provides a better overal UX imo. The issue is that when a user is on another application, looses his network connection somehow, then returns to my PWA, the queries will be executed (be cause of refetchOnWindowFocus) and ultimately fail which will then delete the cached data in local storage, why does this happen? Btw im not using the offlineFirst network mode (just using the default one) because that would require me to cache the API data in my service worker (which I might consider now because of all the issues I have building an offline experience).
Tips are welcome! 🙏...Help figuring out why queryFn is firing with stale params
Consider this snippet from a "Widget" component:
```typescript
const queryParams = useDashboardContext();
const { data, isFetching, isError } = useQuery<ScorecardAlerts>({...
Is it considered bad practice to use a GET request with useMutation?
Hi everyone, I’m wondering if it’s okay to use a GET request with useMutation.
Here’s my situation: I need to check whether a specific version exists when the user enters a version name and clicks a button. To do this, I’m thinking of reusing the existing API that fetches the list of versions.
Would using useMutation for this GET request be considered bad practice?...
Error while using Expo: No QueryClient set, use QueryClientProvider to set one
I'm trying to refactor my app, so I tried setting up Tanstack Query. I'm running into an error No QueryClient set, use QueryClientProvider to set one.
Here is the code:
```tsx
const queryClient = new QueryClient();...
Customizing error messages in global onError callback.
Very often I would like to curate the messages shown in a globally configured toast message that is dispatched by a global onError or onSuccess callback on a per mutation basis. For example, a confirmation message could say
Successfully created [name_of_thing] where [name_of_thing] comes from the mutation response. In the case of an error, [name_of_thing] may need to come from local state if the network request fails. I can't use the meta option because the data isn't static. I thought a...Reconcile server data, local state, session storage.
I'll try to be as succinct as possible:
The app I'm working on requires different views to be persisted for an ag-grid instance. We are loading all data (columns, filters, sorting etc.) from our API. But the client has the ability to lock a view - this will prevent any changes from persisting in the database, but will need to reflect in local state. A further complication - if the view is a master view, changes need to persist in session storage but will never update the db. So we are looking at three different states. I'm looking for a clean way to manage these states. I was thinking a custom zustand hook with an optional persist for master view, that can be passed as select function on data returning from the server (privileging local changes to column widths etc, but adding/removing deleted columns). If a view is locked, we update the state in this hook but don't trigger the rq-mutation.
Grateful in advance for any suggestions!...
Problems integrating Tanstack Query with MUI X Data Grid server-sided data source
Hi all,
I'm facing a problem integrating Tanstack Query with
@mui/x-data-grid server sided data (https://mui.com/x/react-data-grid/server-side-data/).
Based on a different post in the MUI discord I got to the conclusion that this should be feasible by providing a queryClient.fetchQuery to the getRows function for the dataSource however the problem I am now facing is that I get the following error from the onDataSourceError:...Is it expected behavior that polling queries ignore offline mode?
Hey guys, I am setting up offline mode in my React app but it isn't working as expected. After 2 minutes, the whole local cache is cleared for some reason I haven't figured out, all queries get executed and fail because im in offline mode, which resets the cache somehow. Also, polling queries don't seem to respect offline mode and keep making requests. Is this by desin? Here is my setup:
```
export const persister = createAsyncStoragePersister({
storage: window.localStorage,
});...
Using RQ with MultipleSelector component in Async
I am using this component and it's set up like this currently...
```typescript
export default function MultiselectItems() {
const { selectedItems, selectedItemQuantities, onSelectedItemsChange, onItemQuantityChange } = useJacketEditorContext()...
getNextParam is for the wrong query
i have a page that has two active infinite queries - one for a filter and one for the table contents. that seems to work just fine and i can get additional pages to load as i scroll down. howver when i click export and create a third infinite query to grab the whole table, getNextParam is returning results for both the data query and the filter query. seems weird to me. any ideas how to avoid this?
Refetch at every X seconds
Hey everyone!
I have a question about dynamic
refetchInterval behavior. I'm working with a query that should refetch every 60 seconds, but I need it to sync with an external schedule.
Use case: Users can land on the page at any time, but data updates happen on a fixed 60-second server schedule (e.g., at :00, :01, :02 of each minute). If a user arrives at :40, I want the first refetch to happen in 20 seconds (to sync with the :00 mark), then continue every 60 seconds after that....How to run the `queryFn` only on the server and not on browser at all?
I was able to do this with server functions and defer the fetching till the component gets mounted (to avoid fetching at initial render), but somehow i get the error -
Nextjs Warning: Cannot update a component (`Router`) while rendering a different component (`Home`). To locate the bad setState() call inside Home
Nextjs Warning: Cannot update a component (`Router`) while rendering a different component (`Home`). To locate the bad setState() call inside Home
queryOptions not persisted during the hydration/dehydration process
Is there any reason why the below hydration method (and also the dehydration method) does not persist options like
gcTime and staleTime?
Seems like it only does it for queryKey, queryHash, and meta.
This causes some issues in TS Start when defining queries with custom options on the server as those completely get lost on the client....Is this cursed? Anyone knows a better way to achieve it?
I am using Zustand and i want to trigger the query anytime the value changes. Using
useGlobalStore.getState().selectedProvider to not break the rule of hooks does not work, as it isn't reactive. This can be obviously fixed if i just do a proper custom hook instead of just using the queryOptions, but wanted to know if this is accepted or if there is a good way to do it like this, else i'll just make it a custom hook
```ts
export function getUsersQueryOptions(params: QueryUserDto) {
// eslint-disable-next-line react-hooks/rules-of-hooks...Is it possible to augment the queryKey type? i.e extend Register for queryKey
Basically i want to type the first string in the queryKey as an enum to select from
Offline behaviour (V5)
I've been trying for some time using react query to enable offline support for my application.
Today, I found that the V5 completely changed the behaviour, let me explain.
Before, having the application offline using networkMode online, react query only fired the queries only if the application was online, even reloading the browser....
Unexpected useQuery behavior
I've been using this excellent library for quite some time, and today I encountered an unexpected behavior.
In my React application, I have a modal window that is rendered conditionally like this:
{isOpen && <Modal />}
...
Dispatching actions based off query response
Hi,
We have a search function that depending on the search, returns optionally applied filters. We want the front end to render the filters, based on the returned data. The challenge is that since this state is set in redux, we need to dispatch an action to update the state. We keep the state in redux, because it is a global state and the user can update it from multiple screens. A user can update the filter state through input actions as well. Specifically, since this is a search function, we are using
useInfiniteQuery as well.
We thought about handling this in an effect, but since the effect modifies the state that is an input to the query, it triggers a re-fetch. I think ultimately, we are going to have to keep track of the inputs to the api request and the ui state separately, but I wanted to see if there was a documented pattern here. ...query composition/dependencies
is there any way to declare that a query depends on other queries? I am attempting to compose queries, where I have some low level ones, then a higher level one that combines them (conditionally based on some other vars)
I want to make sure that when I invalidate the cache for an inner query, that the outer query also invalidates...
Programatically stop/pause all queries
Hi is there a way in tanstack query to stop all queries
Id like to do so something like
If user is inactive pause all queries till we revalidate the login in a separate window...