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
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...Subscribe to a query whose key contains a specific string?
Is there a way to subscribe to a query whose query key starts with a specific prefix?
For instance, if one component triggers a query with the key ['users', 'filter', 'ranked', 's'], can another component subscribe to it using only ['users'], without knowing the full key?...
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...
setQueryData & nested arrays immutability
I am experiencing an issue with useMemo in my react app. Basically, it's NOT getting triggered when its dependency is updated.
Simplified code example:
```...
useQueries with retries and redirects end up using the same redirect for all Queries
When running code like this
```
const ids = [1, 2, 3]
const combinedQueries = useQueries({
queries: ids.map((id) => ({...
Invalidate React Query on SSR Next JS (App Router)
I am using SSR React Query by following this guide - https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr
I have a API that fetches me list of products.
I am using SSR react query to cache the response
...
Query/Mutations as nested record
Hello,
I'm trying to do something with my queries/mutation to describe my endpoints as a queries/mutations in a recursive record to use (and mostly reuse) in my code.
My problem stems from the portability error on typescript (also I don't think I have used the right types but this works well enough for now). I can't dumb down the types & remove genericity as it's key for the types to work well inside of
useQuery & others.
```
The inferred type of 'teacherSessionAPI' cannot be named without a reference to '.pnpm/@tanstack+query-core@5.80.7/node_modules/@tanstack/query-core/build/legacy/hydration-Cr-4Kky1'. This is likely not portable. A type annotation is necessary.ts(2742)...Using useQuery result in custom hook
Hi,
I'm having trouble using the result of a query in a custom hook, as the hook runs before the promise is resolved, resulting in passing it an undefined object.
My query looks something like this:
```typescript
const {data: formResponse, isLoading} = useQuery<DynamicForm>({...