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
Best practice around using `useDeferredValue` on mutation status?
This could very well have a very straightforward answer but basically I have a component that conditionally renders its content based on a mutation's status. However, the design of the UX means that there can be a pretty jarring flash of content as the status goes from
idle to pending to error.
From what I can tell, using const deferredStatus = useDeferredValue(mutation.status) solves this flashing issue perfectly! Unfortunately, it means that I don't get the type narrowing of the original mutation when trying to use it within the conditional render. Is that just something I have to accept and work around?
I tried wrapping the whole mutation i.e. useDeferredValue(mutation), which seemed to work, but it felt wrong to do that given that it's not really a scalar primitive value as suggested by the React docs to use...How to optimistically update onSucess not onMutation?
I've been trying to optimistically update a list when a create / delete mutation is actually successful in order to not wait for the invalidation refetch or deal with rollbacks and weird jumps. I'd rather have a spinner for the mutation and then immediately show on success. I've tried this in multiple ways (trpc + RQ in new integration) and whatever order i put things in it seems that most of the time it does not work, only occasionally it does and that seems completely random. But most of the time it just does not update the list at all.
```typescript
// inside form component
const mutationOptions = trpc.services.create.mutationOptions({...
Recommended approach to type-narrowing `useMutationState`?
I'm trying to get the strictly-typed mutation state of a specific mutation that's performed on a previous page but not sure if there's an elegant way of doing this with
useMutationState. From what I can tell, query uses a wide type because it's pretty difficult to infer the actual mutation state type based on the options for useMutationState, which is understandable.
What's the recommended approach in this case? Do manual narrowing in the predicate or select options?...Error handling with `queryClient.fetchQuery`
Hi! I have a
useQuery that used to manage fetching events that occur between two dates. The previous implementation expected external state, so this was no problem before. However, we are migrating to a different library, and it has a very different structure.
It instead expects me to handle (start: Date, end: Date, onSuccess: (events: ...[]) => void.
Most of the query hook is easily transferable to queryClient.fetchQuery (select, success handling, endpoint etc.). However, One thing I lose out on is the query.isError functionality, which is kind of a shame, because I know that this query can fail due to reasons that the user should know about.
...Pass a generic infiniteQueryOptions object as parameter
I posted in the main thread but adding a question here... I feel like I'm very close to getting the types working but could just be something that isn't supported
I am struggling with type issues a bit - i am trying to create a generic hook that can take in a infiniteQueryOptions that will ensure a "standard" PaginatedResponse object from the queryFn. I dont have any errors in types on my useGeneric function but when i go to actually use it i run into a type errors with queryKeys being readonly. Is this something that just isn't possible? (https://github.com/TanStack/query/issues/7974) i found this issue but is bit different use case than mine...
API call extremely slow in production but works fine in development
I want to fetch a list of products from our hosted server and display it in the frontend.
In the development environment, the API call works as expected.
However, when I run the production build (either locally or in prod), the same API call takes more than 10 minutes for unknown reasons. ...
Combining debounced query with `isFetching`
Hi! I'm running into an issue that I'm not sure how to approach. It seems like I'm somewhat on the right track, but I'm a bit stumped on what to do to resolve this.
I have the following situation:
```tsx
// Calling a summary endpoint with debounce to avoid excessive calls...
Best way to fetch API data in Next.js with TanStack Query
Hey everyone,
I’m building a Next.js 15 app with the App Router and using TanStack Query for client-side fetching. My FastAPI backend needs an X-API-KEY, but putting it in the client code exposes it.
I thought about using a Next.js route to proxy requests, but then that route could be abused to hit my FastAPI with my key....
orm interface for useQuery different hooks synchronization
Hi! 👋
I’ve built a small ORM-like layer for React Query: https://github.com/pleasewarstop/react-query-orm
It provides an interface to automatically synchronize related useQuery hooks (like relations between entities or entities and their lists).
I’m happy with how it works, but I’m not sure how useful it could be in the broader React Query ecosystem....
Question about useSuspenseQuery
hello, i have a question regarding query revalidation when the previous time that query threw an error.
UseQuery loading spinner showing right away! :(
hey guys im running into an issue where my useQuery ispending state is showing right away! even though im using enabled: false!
im triggering the query to run manually by using refetch()
but for some reason it shows the spinner instantly even though i havent called refetch() yet...
Setting state cache on success
In my app, there is a location selector. Each location has an id and a name. I store the id and name of the selected location in local storage so that I can show the app chrome immediately.
The name falls back to the name fetched from the server once a useQuery completes. However, if the name has changed or the location has been deleted, I want to update the local cache.
Is the correct way to do this in the queryFn? This thread recommends a pure queryFn but then doesn't after the callbacks are removed....
How to pass query data to parent component in react?
hey guys ive recently started working with tanstack query in react and im facing an issue!
so basically i have a parent component
lets call is AudienceLayout.jsx...
usequery error typing
Hello everyone,
When I use a queryKey created with queryOptions in useQuery, the data type is automatically inferred from the return value of queryFn.
However, the error type is inferred as Error....
NextJS: Prefetching/Hydration overwriting fresher cache data when using streaming SSR with staleTime
Hey folks,
tought i might also ask here on discord, here is the original discussion link:
https://github.com/TanStack/query/discussions/9559
...
`enabled: false` returning cached data
Hi there! We've noticed a bit of a footgun in our codebase. Folks on our team will use
useQuery and pass in a query object that depends on some data. If that data isn't available or isn't loaded yet, they'll set enabled: false to disable the query. However, disabling a query only prevents the query from running, and it may still return cached data (see https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries). People then write the rest of the code expecting data to be undefined, but in prod that data will sometimes happen to be cached by some other part of the app and users will get all of that cached data instead of undefined and the UI will break or behave unexpectedly.
Our solution was to overwrite useQuery to have the resulting data always be undefined if enabled is false since that's what people on our team expect to happen. Is there any downside to doing this?
I've attached our overwritten useQuery with what I believe are the correct types (I copy-pasted most of the code from the useQuery implementation). I don't love having to use useMemo but it seemed preferable to updating data directly on the returned object....Tracked properties mutation
Just wondering, the tracked properties (https://tanstack.com/query/v5/docs/framework/react/guides/render-optimizations#tracked-properties) is a feature only working for
useQuery? Lets assume I am not using isPending from my useMutation, it seems like my component keeps rerendering?Invalidating queryKey with variable doesn't work
Hi guys,
I'm encountering issues when trying to invalidate queries with a variable in the query key during the onSettled of a useMutation.
Basically trying something like this (with version
5.84.1):
...Fragment masking with GraphQL code-gen does not work.
Hey,
i try to set up graphql-code gen and want to use fragment-masking. Here's an example:
```ts...