TanStackT
TanStack•2y ago•
7 replies
radical-lime

Handle 404 from a component query

I am using '@tanstack/react-query' and '@tanstack/react-router'. I have a component that is a child in my __root.tsx that queries the api. When it works, it works, but I am having trouble in the context of this file based router to figure out what to do when it 404s. This one data fetch in turn runs the entire ui and every query afterwards, so the ui won't work if that one request fails. Ideally I'd like to just display an error component, or reroute to one in the 
if (isError) {...}

section of that component, but I don't know what would be proper protocol here. I had
  if (isError) {
    return (
      <CatchBoundary getResetKey={() => 'reset'} onCatch={(error) => console.error(error)}>
        <div>Error fetching dates..</div>
      </CatchBoundary>
    )
  }

like in the documentation, but obviously the rest of the ui still renders in addition to this now ^
Was this page helpful?