T
TanStack•16mo ago
unwilling-turquoise

Preventing a specific query from triggering `onError`

I have the following client setup 
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: Infinity,
    },
  },
  queryCache: new QueryCache({
    onError: (error) => toast.error(error.message),
  }),
});
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: Infinity,
    },
  },
  queryCache: new QueryCache({
    onError: (error) => toast.error(error.message),
  }),
});
And in my RootRoute, I fetch user data on beforeLoad function and immediately showing the pendingCompoent. When the query fails, it triggers the toast.error and then redirects. 
export const Route = createRootRoute({
  pendingMs: 0,
  pendingMinMs: 1000,
  // wrapInSuspense: https://github.com/TanStack/router/pull/1611
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await queryClient.fetchQuery({
        retry: 1,
        queryFn: getCurrentUserQuery,
        queryKey: ['current_user'],
      });
    } catch {
      redirect({ to: '/sign_in' });
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => (
    <>
      <Navigator />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});
export const Route = createRootRoute({
  pendingMs: 0,
  pendingMinMs: 1000,
  // wrapInSuspense: https://github.com/TanStack/router/pull/1611
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await queryClient.fetchQuery({
        retry: 1,
        queryFn: getCurrentUserQuery,
        queryKey: ['current_user'],
      });
    } catch {
      redirect({ to: '/sign_in' });
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => (
    <>
      <Navigator />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});
Is there a way to prevent this specific query used in beforeLoad to trigger the toast message?
4 Replies
helpful-purple
helpful-purple•16mo ago
this is a question better suited in #react-query-questions however, since I know the answer I will add it here 🙂
helpful-purple
helpful-purple•16mo ago
you should have a look at @TkDodo 🔮 's excellent blog: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#defining-on-demand-messages
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
helpful-purple
helpful-purple•16mo ago
in your case, I would use the query meta functionality to tag a query as "do not show the error" as follows: 1. register a type for the queryMeta property 
declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: {swallowError?: boolean}
  }
}
declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: {swallowError?: boolean}
  }
}
2. only show the toast if swallowError is falsy: 
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: Infinity,
    },
  },
  queryCache: new QueryCache({
    onError: (error, query) => {if (!query.meta?.swallowError) { toast.error(error.message) },
  }),
});
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: Infinity,
    },
  },
  queryCache: new QueryCache({
    onError: (error, query) => {if (!query.meta?.swallowError) { toast.error(error.message) },
  }),
});
3. in your loader, set swallowError to true: 
 await queryClient.fetchQuery({
        retry: 1,
        queryFn: getCurrentUserQuery,
        queryKey: ['current_user'],
        meta: { swallowError: true },
      });
 await queryClient.fetchQuery({
        retry: 1,
        queryFn: getCurrentUserQuery,
        queryKey: ['current_user'],
        meta: { swallowError: true },
      });
unwilling-turquoise
unwilling-turquoiseOP•16mo ago
Oh, sorry I just mixed up the channels as both of them are on my side bar. Thanks for the thorough example and solution!

Did you find this page helpful?