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
useSuspenseInfiniteQuery not working in tanstack start
Hey guys,
I am using tanstack start with tanstack query and I am hitting a weird bug where the loading / refetching state is not working properly.
Before opening a github issue I just wanted to double check if this behaviour is expected or not....
Queue invalidation without aborting in-flight requests
I have key parts in my app where queries sometimes (in bursts) can invalidate faster than the async queryFn can return fresh data.
React-query will provide a pretty bad user experience in this case potentially showing the user stale data for minutes, as it will (on every invalidateQueries call) try to abort in-flight requests, ignores their results and just calls queryFn again.
Instead, it's way better to not abort the current request but await it, update the data and queue another refetch to be run after that. This way the user will see data that's pretty much up-2-date.
...
Partial matching with setQueryData
I'm using the following query key in my project like this:
```export const evaluationKeys = {
all: ["evaluations"] as const,
contents: (contentId: string, filters?: string) =>...
How to wait for onSuccess to resolve on a mutation before setting isPending to false
For the following mutation,
isPending is false once the mutation is resolved, so it does not wait for onSuccess to resolve.
```ts
useMutation({
mutationFn: mutation,...type that QueryOptions can be assigned to
Please! I've been stuck on this for far too long.
I want a function to accept queryOptions as an argument.
```ts...
Tanstakc query worth for my usecase?
For my work i pretty much make alot of single "portals/webpage" which has nothing to do with other pages. Right now ive been using tanstack router and lazy load every page as every page is not supposed to be connected to anything else. But im making right decision in not using query right? Or will i get any benefits of it
I'm here with a question, I'm an apprentice, and lately in many personal applications, I always use
I'm here with a question, I'm an apprentice, and lately in many personal applications, I always use react query, to facilitate caching and data invalidation, but lately I've been focusing on learning how to optimize applications, using server rendering, but something I noticed is that I always have to use client side, when using queries, something that in some cases may be necessary, but in others not, what do you do to improve performance in these cases? Maybe I don't understand how it works, but could someone explain it to me. thanks
example of an function to fetch data
```js
...
rsbuild + iOS 14 and below issue
Hi, I’m facing an issue where my built project is giving an error due to unsupported private fields for iOS mobile safari 14 and below. I set the chunk splitting strategy to “by module” and it’s only this package that is using private class fields in the built code. Are there any workaround for this?
React useInfiniteQuery & useQuery caching issue
Hi, my React app is using both useQuery and useInfiniteQuery. When using react-query-devtools, I can see the cache is being set and cleared with no issues for queries that used useQuery to fetch the data. But any data fetched using useInfiniteQuery is not setting the cache and I am not able to use invalidateQueries to clear it either. We were previously using a SUPER old version of React query (not Tanstack) and this pattern was working.
I have tried various different solutions with no luck. Below is the exact scenario I am trying to solve for and my current implementation.
Scenario: ...
React query + chrome extension
gm. first of all, shoutouts to all of you, I used react-query and it's really a pleasure to work with it, the DX is top notch.
I am now working on a chrome extension and I want to use react-query as my state management library.
I do have a basic CQRS architecture like this
chrome extensions have a background process (a service worker) where ideally you can offload the heavy computation. I abstracted the communication between client and background process using trpc
my FE component is calling a trpc method that ends up in the background process. the background process is calling my backend for example and updates my chrome storage...
how to mock react query data (in app not in test tiles)?
hey guys,
I am mocking some react query data in my landing page like so. The reason I am doing this is because i am using the same components both in my app and in my landing page.
However I feel like this is not the correct way of doing it, so I am wondering what you guys think about this and if there is an easier way of doing it ?...
onSuccess on useQuery() --> No overload match this call
The onSuccess callback seems to be removed from last version of TanStack Query causing "No overload match this call" Error. Why ???
```typescript
const { isLoading, error, data } = useQuery({
queryKey: ['myData'], // Unique key for the query
queryFn: async () => {...
useQuery to get data in nested route
I've been using
useQuery without a queryFn but say query key to get the data and status information about the query in a components outside where I supply the queryFn [I thought this was supported behavior, let me know if it isn't]. If I have a path like reports/$reportId I have the useQuery with the queryFn at the "reports" level, but then useQuery without queryFn at the "$reportId" level. When I navigate from /reports to /reports/$reportId this all works fine, but if I go directly...isLoading/isFetching is always true and data never gets populated
This seems to happen when I move through different pages quickly that use different useQuery hooks. But the bug is inconsistent. Sometimes under the same circumstances it will load the data, other times it will not (maybe something to do with the caching?).
dependencies:
````"@tanstack/react-query": "^5.62.7",
"react": "^18",...
Issue in post data with mutate
i have an issue with posting data using mutate
in this i set the api response 200 ok for success and 400 bad request for failure
when the handle create button click it call the api when is api response is 400 it send the input validation response given in the image...
Derive computed value from multiple query caches that automatically updates when the caches change.
Hypothetical example:
```ts
export const useMessagesQuery = ({ chatId }: { chatId: string }) => {
return useQuery({
queryKey: ['messages', chatId],...
How to access query key above its scope?
I have a page component that renders a list (deeply nested). The list has a dynamic query key that changes once the user interacts with the different filters. I want to access the ever-changing query key above the scope of the list component, so I can read the query state and act on it (show/hide components accordingly). Is there a way to do that without maintaining unique ids? for example, the list will have an id like so:
["main-list", ...otherKeys], another query will be `["sidebar-list", ....Cache seemingly not working
I'm trying to use tanstack query to call my AWS AppSync GraphQL API, which is working in that it sends a request and receives a response, however it doesn't appear to be caching the response from the API (when I use the
refetch function, it always resends a network request to the API.
Here's some minimal code:
```ts
const getActiveProgrammes = async () => {...chat long poll
Hi all,
I'm currently building out a chat application. The back-end doesn't yet support web socket connections, so we're relying on long-polling to get chat messages. I'm trying to build a refetch decay, and just wanted to check-in on best practices. FWIW, it is working.
```
export type UseFetchChatDetailsQueryOptions<T> = {...
feat: notify about observer options change in v4.1.0 cause perf issues?
Hi
Im in the process of migrating from v3 to v4 in a very big app.
When using v4.1.0 and above (up to 4.36.1), I get redundant rerenders probably related to this change:
https://github.com/TanStack/query/pull/3989/files
It notifies about options changes (queryFn, queryKey are not memoized in the whole app..)...