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

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?

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

isProjectError

How to handle 500s from prefetching

Similar Threads

How to handle 500s from prefetching

Similar Threads

Similar Threads

Similar Threads