Middleware - Unable to decode turbo-stream response

[jezikk]

Is it possible to throw response from middleware which is compatible with both fetch and useFetcher (stream) requests?

The example below do these things:

• For document based request redirect to IDP
• For fetch request response 401
• For fetch request using useFether return "Unable to decode turbo-stream response" error

function raiseError(request: Request, redirectUrl: string, headers?: Headers) {
  const type = getRequestType(request);

  if (type === "document") {
    return redirect(redirectUrl, { headers });
  }

  if (type === "json") {
    return Response.json(
      { status: 401, statusText: "Unauthorized" },
      { status: 401, statusText: "Unauthorized" },
    );
  }

  return data(
    { status: 401, statusText: "Unauthorized" },
    {
      status: 401,
      statusText: "Unauthorized",
      headers,
    },
  );
}

function getRequestType(request: Request) {
  const url = new URL(request.url);

  if (request.headers.get("Sec-Fetch-Dest") === "document") {
    return "document" as const;
  }

  if (
    request.headers.get("Content-Type") === "application/json" &&
    !url.pathname.includes(".data") // This doesnt work
  ) {
    return "json" as const;
  }

  return "stream" as const;
}

[jeyj0]

From the Changelog, under Middleware (https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#middleware-unstable):

You may throw a new response to short circuit and respond immediately

[jezikk]

Yes this is exactly what I do. But problem is that you cannot respond the same response for each use case. For example if you use useFetcher, you should respond data using data(...), because it uses turbo-stream. So it's not as simple as it seems. :) But maybe I'm doing something wrong.