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
Pagination: placeholderData not working
Hey guys! I am just playing around with @tanstack/react-table and pagination and got the problem, that after switching the page, for a short time, I'll get "No results". I'll found this doc-page, which seems to cover exactly this problem: https://tanstack.com/query/latest/docs/framework/react/guides/paginated-queries
hovever, for some reason, I'll still get the flickering with
placeholderData: keepPreviousData. What could be the Problem? I attach my two components here. Anyone knows, what my Problem could be?
Page (data fetching): https://just-paste.it/jSfMtm16Et,...Is this custom hook correct?
Currently I have this custom hook where it uses React Query, the case, that there are many things that can be improved, plus I have some cases that are missing to add. I'm learning to use React Query but it's getting complicated. If someone could look at the code and review where I should refactor and improve. I had created a generic Custom hook to get the data, but is this the best idea? Or create a custom hook for each use case? I use this with React Native.
https://pastebin.com/wxJwkbLz...
What is the correct way to subscribe to a fresh queryObserver?
I skimmed the source for query observer and useBaseQuery and it's not obvious why the naive solution here isn't okay if our goal is that handleResult get notifications for current state + all future updates:
```
export function safeSubscribeObserver<Obs extends QueryObserver<any, any, any, any, any>>(
observer: Obs,...
setQueryData on a list with filters
Hey, i have a list with filters (meaning I can have a lot of different keys that contains a list), I would like to know if it's the recommended way to update a row without reloading the whole liste:
```tsx
// my keys
export const learningsKeys = {...
Tracking mutations via mutation cache?
Example: Have a row of records that could potentially have different mutations apply to them. Mutations can get called on these rows by a context menu that unrenders.
If I wanted to track the state of each of the rows and their related mutation, am I better manually tracking an array of Id's with error and loading states., or subscribing in a row component to the mutation cache?...
How does React Query reduce the complexity of tracking data dependencies at the route level
I'm trying to understand how data dependencies are managed at the route (or loader) level, especially in applications that use prefetching.
It seems like using a data fetching library like React Query, SWR helps initiate data requests before the component renders(with router framework). But configuring the prefetch logic correctly in loaders or route-level data fetchers can add a lot of complexity.
My question is:...
Testing react query useSuspenseQuery hook
I am trying to test useSuspenseQuery hook independently without any components.
I followed the blog post here to test useQuery and it doesn't work for SuspenseQuery if I add error state or isLoading state
https://tkdodo.eu/blog/testing-react-query...
How to add eslint-plugin-query to .eslintrc.json?
Can somebody confirm that this is the correct way to do it?
{
"extends": ["plugin:@nx/react", "plugin:@tanstack/eslint-plugin-query/recommended", "../../.eslintrc.json", "../../.eslintrc-react.json"],
"ignorePatterns": ["!*/"],...
Why does updating the queryClient outside of React not affect react state?
For example, if I call queryClient.removeQueries() or queryClient.setQueryData() inside getInitialProps (outside of react context), the React component doesn’t seem to reflect those changes.
But when I do the same operations inside a React component using useQueryClient(), the UI updates as expected.
Is this expected behavior? (hope it is...) if it is.. why is that?...
Sharing data betweem useQuery with useInfiniteQuery (continuation tokens)
Not sure if I am over thinking this but conceptually I need some advice on what to do. Between these two queries the underlying data is exactly the same.
Goal:
1. User navigates from component 1 which uses
useQuery hook to component 2 which uses useInfiniteQuery
2. I have a little helper function that retrieves cached data from that useQuery hook and transforms it into initialData that useInfiniteQuery expects. This works perfectly on mount. ...ensure vs prefetch query in deferred data loading
I'm trying to understand the difference between
ensureQueryData and prefetchQueryData, esepcially in the context of deferred loading.
From the tanstack router docs:
```typescript...Type narrowing for hook that has multiple queries
Hey folks, I'm wondering if someone can help me figure this query/typescript issue out. For the useQuery hook it's well known that if you look for isPending and isError then you get some helpful type narrowing on the data.
My question is how to create a hook that wraps multiple useQueries and returns type narrowing for all the returned data.
Here's a stripped down version of the hook...
Query fails when using tRPC
When trying to prefetch data with tRPC it fails with the following:
...
A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
⨯ [Error: redacted] { digest: '2062921512' }
A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
⨯ [Error: redacted] { digest: '2062921512' }
Query keeps getting triggered
Hi there, I am using a query in my
beforeload function in my router. It's a function that fetches the user session, but I have an issue, that it seems that whenever I navigate anywhere on my app, the function gets called every time, sometimes multiple times:
```ts
beforeLoad: async ({ context }) => {
const user = await context.queryClient.fetchQuery({
queryKey: ["user"],...
Tanstack Query + ky & Error Handling
Hi all.
Anybody used the ky client for fetching data from an API? And how to best handle errors that get thrown from ky?
Anybody got an good example or some good blog post about it?...
Is it okay to use useInfiniteQuery and useQueries together?
Hello. I created a custom hook that uses both useInfiniteQuery and useQueries. There’s a component that needs to display data fetched with useInfiniteQuery combined with additional data fetched using useQueries, so I wrote it this way.
Is the following implementation of the custom hook a valid approach?
If it is valid, how can I resolve the following error?
...
Suspense bug: Fallback not triggering
In this example from the docs, why wouldn't I ever see the fallback <h1>Loading projects...</h1>?
https://tanstack.com/query/latest/docs/framework/react/examples/suspense...
How do you guys handle data fetching during navigation? (next.js page router + getInitailProps)
I’m using the Page Router with getInitialProps.
Let’s say I’m navigating between pageA and pageB (e.g., Page A → Page B → Page A).
I want users to always see the most up-to-date data, not stale content.
...
How to use experimental broadcastQueryClient
Hey guys, I was looking at the documentation for the broadcast query client plugin: https://tanstack.com/query/latest/docs/framework/react/plugins/broadcastQueryClient, doesn't it require any other setup?
Asking because I am not sure if it is actually working, I would expect that the data in query client is automatically synced between tabs without me having to do something but it is not the case....
Notification for slow queries and retries
Is there a smart and stable way to globally show a notification/toast while there are slow queries taking place or failing queries are retrying?
We're using
react-toastify, and actually showing and hiding a toast is not an issue, but very unsure where would be the best to hook into react-query so that the notification shows and hides properly (with no duplicates if there are multiple slow/retrying queries happening at the same time)....