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
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>({...
useMutation in Context+Provider infinite calls
Hi all, thanks in advance for your time.
I'm using react-router & tanstack query.
I need a POST to get fired off upon App initialisation and I figured I could do that using a
createContext and provider to then be able to access it a bit deeper down easily, that'd be useful. I am completely unable to get this to work or understand why I am getting infinite re-renders. I have tried everything chat gippity is suggesting and have googled as much as possible....useMutation refreshing problem
Hello, is it normal that when using useMutation function and calling .mutate() the page reloads ? like it refreshes not re-render, and if so how do I fix it ?
Is select callback only meant for data transformation?
I’m running into interesting side effects ( bad state updates ) when updating global stores within the select callback. Is it mostly meant to transform data?
What causes `queryClient.invalidateQueries()` to error when all requests are good?
I wanted to add a toast-notification when doing a forced invalidation of the full cache and used this code:
```ts
void notify.promise(
queryClient.invalidateQueries(
{ refetchType: 'all' },...
Is it possible to wait for a few seconds before invalidates the cache in onSuccess?
I have tried this, but it does not work as I expect
```ts
useMutation({
mutationFn: fetchData,
onSuccess: async () => {...
Can `useQuery`'s result type figure out that all errors throw?
It's wonderful that the typings can reassure me that if status is neither pending nor error, I can rely on data being defined. It seems that it would be even better if they could somehow realize that because
throwOnError is set, one only needs to eliminate pending in order to guarantee this state of affairs. Is this a deliberate design decision, am I doing things wrongly, or is it some sort of inherent TypeScript limitation?TypeError: Cannot read properties of undefined (reading 'fetchStatus')
When i render react query dev-tools
```tsx
const ReactQueryDevtoolsProduction = lazy(() =>
import('@tanstack/react-query-devtools').then((res) => ({ default: res.ReactQueryDevtools })),
)...
Quick question about key equality and using it with gql
This might be obvious based on the docs:
As long as the query key is serializable using JSON.stringifyDoes this mean they are checked via the JSON serialised version for equality? So if I did:...
with nextjs what is the best way to architect your queries?
i have a nextjs front end with a nestjs backend with microservices.
when deployed i realized that there are a myriad of apicalls that are just jhappening because htey either exist, or because the query keeps rendering on the timer.
i understand i am still weak in my query approach, especially for an app that needs details on the front end.
but at least how do i handle the querying properly when i am creating and updating information?...
SSE background Fetching while component unmount
So I am using react query to receiving streaming SSE api. The problem is this stream should not be canceled or stoped until a manual stop button is clicked. How can I make fetch SSE and complete it even though the component is unmounted? React query’s default behavior is canceling the quey if component is unmountrd. For the stop button, I am using query’s signal, but this makes react query to stop the streaming when component unmounted
Weird type bug when using `queryOptions` with `useQueries`
If you have a type where the only required key is
name, the types of results in the combine function seems to be wrong. Any ideas on why this is?
```ts
import { queryOptions, useQueries } from "@tanstack/react-query";
...default mutation onError fallback?
I would like to create a global useMutation error fallback, where it runs only if the specific mutation doesn't have its own onError handler, or if that error throws. I have set defaultOptions in QueryClient as so:
```ts
const queryClient = new QueryClient({
defaultOptions: {
mutations: {...