TRPC not returning immediately on error

Simple:

export const sitemapRouter = router({
  getSitemap: protectedProcedure
    .query(async ({ ctx, input }) => {
  throw new Error("testing throwing errors");
})

export const sitemapRouter = router({
  getSitemap: protectedProcedure
    .query(async ({ ctx, input }) => {
  throw new Error("testing throwing errors");
})

Component:

  const {
    sitemapUri,
    setSitemapUri,
    sitemapUrls,
    sitemapIsLoading,
    sitemapIsError,
    sitemapError,
    sitemapStatus,
    sitemapUrlForm,
    submitHandler,
  } = useSitemaps();

return (
            {sitemapError && <div>error: {sitemapError.message}</div>}
            {sitemapIsError && <div>Iserror: {sitemapError.message}</div>}
            {sitemapStatus && <div>Status: {sitemapStatus}</div>}
)

useSitemaps:

  const {
    sitemapUri,
    setSitemapUri,
    sitemapUrls,
    sitemapIsLoading,
    sitemapIsError,
    sitemapError,
    sitemapStatus,
    sitemapUrlForm,
    submitHandler,
  } = useSitemaps();

return (
            {sitemapError && <div>error: {sitemapError.message}</div>}
            {sitemapIsError && <div>Iserror: {sitemapError.message}</div>}
            {sitemapStatus && <div>Status: {sitemapStatus}</div>}
)

useSitemaps:

ts export function useSitemaps() { const { data: sitemapUrls, isLoading: sitemapIsLoading, isError: sitemapIsError, error: sitemapError, status: sitemapStatus, } = trpc.sitemaps.getSitemap.useQuery( { url: sitemapUri, } );
return { sitemapUri, setSitemapUri, sitemapUrls, sitemapIsLoading, sitemapIsError, sitemapUrlForm, submitHandler, sitemapError, sitemapStatus, }; } ```

3 Replies

fotoflo•2mo ago

after like the 4th console log, it shows the error ont he FE

fotoflo•2mo ago

i tried setting retry to false

Sturlen•2mo ago

if there's something wrong with they query then Tanstack Query Devtools should be able to help you. https://tanstack.com/query/v4/docs/framework/react/devtools

Devtools | TanStack Query React Docs

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! ðŸ¥³ When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

Gaming

Programming

TRPC not returning immediately on error