JD
JD•19h ago

How to handle 500s from prefetching

I'm using nextjs app router. I'm having an issue where I prefetch using something like the following in a server component: Server 
  void trpc.projects.getProject.prefetch({
    projectId,
  });
  void trpc.projects.getProject.prefetch({
    projectId,
  });
In my client components, I have something like: Client 
function useProjectQuery(id: number) {
  return trpc.projects.getProject.useQuery(
    {
      projectId: id,
    },
    {
      enabled: !!id,
    }
  );
}

const { data: projectData, isFetching: isProjectLoading, isError: isProjectError } = useProjectQuery(projectId);
function useProjectQuery(id: number) {
  return trpc.projects.getProject.useQuery(
    {
      projectId: id,
    },
    {
      enabled: !!id,
    }
  );
}

const { data: projectData, isFetching: isProjectLoading, isError: isProjectError } = useProjectQuery(projectId);
This works fine with success and errors other than 500, but when a 500 happens, altho isProjectError will fire, the 500 in the react stream will trigger a plethora of errors beyond this function's scope, including internal processes needed to render chunks. With turbopack, the browser starts running slow because of the fan-out and reaction to the poisoned stream. In production, it causes third parties, again outside the scope of this function, to fail. I'll see error messages in my console like attached. In a traditional non-prefetch implementation, I'd handle the 500 and move forward without breaking everything in its path. With prefetching, if a 500 happens, it now breaks much more than what I'm able to handle. Am I doing this wrong? What's the proper way to handle a 500 from a prefetch without fanning out to internal processes on nextjs app router?
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?