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
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...
invalidating the first key doesn't work
in tanstack query, what are the possible reason why invalidating ...
["user"] doesn't invalidate ["user", "some-username", "posts"]? i'm sure that i'm using correctqueryClientas well
// useQuery
const threadsQuery = useInfiniteQuery(userThreadsInfiniteOptions(username));
// useQuery
const threadsQuery = useInfiniteQuery(userThreadsInfiniteOptions(username));
Hiring a full stack developer
Full Stack Developer (10+ yrs) | Remote | Long-term
We’re looking for a highly experienced Full Stack Developer (10+ years) to join our team on a long-term basis. This role is open to global candidates and offers full remote flexibility.
🌟 What You'll Work On:
Build and maintain robust backend services using Python, .NET, C#, or Java.
Design rich, responsive front-end interfaces with Angular and React....
Upgrading to v5.59 causes crashes on sandboxed environment
Upgrading react-query from 5.56.2 to 5.59.0 causes my app to crash. I've tried debugging this for hours but cannot figure out what is concretely causing this. My app runs inside a sandboxed JS environment that uses react 18, namely in the Shopify POS app. I can attach the debugger, but unfortunately even the debugger crashes, making it impossible for me to figure this out.
Does anybody have any idea what could be causing this? I certainly don't. I'm not sure if it's just some JS API used by 5.59.0 that is restricted by the sandboxed env, or if its something else. I've been trying to figure this out for hours but haven't had any luck, so wondering if anyone has encountered a similar issue...
Cache update
Is it normal to call several custom functions to update the cache after a mutation when using TanStack Query, or is that considered ineffective?