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
Error Handling with React Query
Wanted to ask something about error handling using React Query. Novice question but wanted to understand the inner working + if I am going right about this.
All the examples I have seen of it being used are something along the lines of
```ts
const { data, isError } = useQuery({...
new QueryClient throws error on NextJS with dynamicIO enabled.
When using react-query with nextjs@15.0.3-canary.4 with
dynamicIO enabled I get the following error when trying to create a query client.
``
Error: Route "/" used Date.now() instead of using performance or without explicitly calling await connection()` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
at io (node_modules/next/src/server/node-environment-extensions/utils.tsx:33:31)...How to pass timeout option to useQuery using fetch from context signal in the below code.
const query = useQuery({queryKey: [key], queryFn: ({signal}) => fetch(url, {signal})})
const query = useQuery({queryKey: [key], queryFn: ({signal}) => fetch(url, {signal})})
Throw only specific errors
Hey I was wondering how I can throw only specific errors. Some errors I receive from my API I have setup to spawn a toast with an error message using global onError hanfdlers, but I want the other errors to be thrown so they can be caught by the error boundary. The issue is that if I enable the throwOnError it will also throw the errors that I have setup a toast for. Inside the error handlers I have set them up to throw the errors that arent put in a toast, but they dont get thrown when I have t...
Issue in understanding one of the examples in tanstack/query (playground example)
Hi all, I was playing with the example in the docs https://tanstack.com/query/latest/docs/framework/react/examples/playground
we are setting gcTime explicitly in the
```
React.useEffect(() => {
queryClient.setDefaultOptions({...
useEffect not triggered when data change
I have this :
```tsx
const { data: playlistItems } = usePlaylistItems(playlist?.id);
const { data: isAllowedToEdit } = usePlaylistIsAllowedToEdit(playlist?.id);
console.log('in table playlist items', playlistItems);...
Re-render 1 component but not another via the same queryKey?
I read that you can use
select to subscribe to a sub-set of data, i.e I am assuming that when another component invokes invalidateQueries for the same queryKey, it shouldn't re-render the other component if the select returns a sub-set of data that did not change?Sporadic network errors
Hey,
we're using React Query v4.36.1,
sometimes, when disconnecting and reconnecting to the internet or going back to our app's tab after a few hours of not using it we get network errors from requests.
our settings configuration is:...
useQueries({ combine: ... }) vs useMemo
Is there any advantage to using
combine in useQueries vs taking all the query results and passing into useMemo to "reduce" results down?
Seems like since we lose the nuance of each query in combine, we'd get the ~same effect with a useMemo...Is it possible to set default queryKey for all queries?
Hello)
Has anyone ever needed to set a default
queryKey that applies to all queries? In my project, I send the user's language with most queries to receive translations based on it. I want to refetch the query whenever the user changes the app language.
Of course, I could add the language as a queryKey for each individual query, but is there a way to set this as a default for all queries?...How to properly filter data in tanstack table?
```
const orders = useGetManagerOrders(
{
page: pagination.pageIndex + 1,
per_page: perPage,...
Persisting mutations for offline
As far as I understand it RQ supports offline in that it can paused mutations while you're offline and then resume them again. However, what if we want offline to support e.g. the app being closed and thus requiring persisting the mutations (e.g. the variables/context) that got passed to them. Is there an established pattern here?
How matchQuery work ?
I have a little problem with my query cache. I read this excellent article for good way to use react query : https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations
Well Ive setup this client :
```tsx
const queryClient = new QueryClient({
defaultOptions: {...
onSuccess, onError, onSettled all calling after mutation...
Hey there 👋 I've run into a strange issue where all my mutation callbacks are executing after a successful mutation call. I am using tRPC, but I don't expect that this should be related to the issue. Any help figuring this issue out is greatly appreciated.
Procedure definition:
```TypeScript
createPostComment: authedProcedure...
Refreshing Data After Deleting with useQuery Cache
Hi,
I’m using useQuery to cache my data, but I want to ensure that the data is refetched after performing a delete operation. Currently, when I reload the page, the data is stale due to caching. What is the best way to trigger a refetch of the data after deleting an item? Should I use queryClient.invalidateQueries or is there a better approach?
Thanks for your help!...
Schedule an invalidation of a query
I have a page that displays either videos or images, one at a time. Videos play until they finish, while images are displayed for 5, 8, or 15 seconds. Once a video or image ends, the next one is shown. I fetch these videos and images through a query, which is invalidated upon a real-time database change to update the content. However, I don't want the query to be invalidated immediately when a change occurs. Instead, I want the query to wait until the current video finishes or the image's set duration has elapsed. Only then should it invalidate, ensuring a smooth user experience.
Code:...
Pattern for mutations that trigger queries and further mutations
Hello all so using react query v4. Still fairly new to it and trying to figure out the best practices. I have a submit command that will need to do the following;
1. calls an api with a payload and that api runs an async task to update
2. polls another api to see status of the async job above
3. once poll completes with a status of success update another api with the payload...
Webpack issue upgrading React Query from v4 to v5
After upgrading
@tanstack/react-query and @tanstack/react-query-devtools, Webpack (v4) fails to build my application.
```
frontend-1 | ERROR in ../node_modules/@tanstack/query-devtools/build/index.js 5:2
frontend-1 | Module parse failed: Unexpected character '#' (5:2)...How to work with prefetch query in NextJS app router?
I've been trying to set up prefetch in NextJS App router using the guide at: https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr
but it never seems to work even when I have the same code from the docs....