Unexpected `HttpApiDecodeError` in error handling with openapi-fetch and openapi-react-query

So I have a fairly simple backend service. Example of a group of endpoints.

export class ClientsApi extends HttpApiGroup.make("clients")
  .add(
    HttpApiEndpoint.get("listClients", "/")
      .addSuccess(Client.pipe(Schema.Array))
      .addError(CustomError2),
  )
  .add(
    HttpApiEndpoint.post("createClient", "/")
      .setPayload(CreateClient)
      .addSuccess(Client),
  )
  .prefix("/clients")
  .middleware(AuthenticatedUser)
  .annotate(OpenApi.Title, "Clients")
  .annotate(OpenApi.Description, "Api for managing clients") { }

export class ClientsApi extends HttpApiGroup.make("clients")
  .add(
    HttpApiEndpoint.get("listClients", "/")
      .addSuccess(Client.pipe(Schema.Array))
      .addError(CustomError2),
  )
  .add(
    HttpApiEndpoint.post("createClient", "/")
      .setPayload(CreateClient)
      .addSuccess(Client),
  )
  .prefix("/clients")
  .middleware(AuthenticatedUser)
  .annotate(OpenApi.Title, "Clients")
  .annotate(OpenApi.Description, "Api for managing clients") { }

On the frontend I'm using

openapi-fetch

openapi-fetch

and

openapi-react-query

openapi-react-query

to have type-safe API communication.

I was testing some basic error handling (w/ the

listClients

listClients

endpoint) and while it seems to work pretty good, I noticed an extra potential error I'm not sure where its coming from.

Example of error handling:

  const { data, error } = api.useQuery("get", "/clients");
  if (error?._tag === "CustomError2") {
    return (
      <div>
        <h1>Whoops! Random error!</h1>
        <p>{clients.error.message}</p>
      </div>
    );
  }

  const { data, error } = api.useQuery("get", "/clients");
  if (error?._tag === "CustomError2") {
    return (
      <div>
        <h1>Whoops! Random error!</h1>
        <p>{clients.error.message}</p>
      </div>
    );
  }

But in this case the

_tag

_tag

is:

_tag: "HttpApiDecodeError" | "CustomError2" | "Unauthorized" | undefined

_tag: "HttpApiDecodeError" | "CustomError2" | "Unauthorized" | undefined

Unauthorized

Unauthorized

makes sense cuz my auth middleware can throw that.

CustomError2

CustomError2

is thrown by the handler.

HttpApiDecodeError

HttpApiDecodeError

though is a bit weird to me since this endpoint doesn't take any payload, so there shouldn't be any decoding errors. I initially thought that the bearer security middleware is potentially throwing that if no Authorization header is provided, but even if I remove the middleware for this endpoint, it's still there.

Is that error always there by default, no matter if there's no decoding happening or am I missing something?

Unexpected `HttpApiDecodeError` in error handling with openapi-fetch and openapi-react-query

So I have a fairly simple backend service. Example of a group of endpoints.

export class ClientsApi extends HttpApiGroup.make("clients")
  .add(
    HttpApiEndpoint.get("listClients", "/")
      .addSuccess(Client.pipe(Schema.Array))
      .addError(CustomError2),
  )
  .add(
    HttpApiEndpoint.post("createClient", "/")
      .setPayload(CreateClient)
      .addSuccess(Client),
  )
  .prefix("/clients")
  .middleware(AuthenticatedUser)
  .annotate(OpenApi.Title, "Clients")
  .annotate(OpenApi.Description, "Api for managing clients") { }

export class ClientsApi extends HttpApiGroup.make("clients")
  .add(
    HttpApiEndpoint.get("listClients", "/")
      .addSuccess(Client.pipe(Schema.Array))
      .addError(CustomError2),
  )
  .add(
    HttpApiEndpoint.post("createClient", "/")
      .setPayload(CreateClient)
      .addSuccess(Client),
  )
  .prefix("/clients")
  .middleware(AuthenticatedUser)
  .annotate(OpenApi.Title, "Clients")
  .annotate(OpenApi.Description, "Api for managing clients") { }

On the frontend I'm using

openapi-fetch

openapi-fetch

and

openapi-react-query

openapi-react-query

to have type-safe API communication.

I was testing some basic error handling (w/ the

listClients

listClients

endpoint) and while it seems to work pretty good, I noticed an extra potential error I'm not sure where its coming from.

Example of error handling:

  const { data, error } = api.useQuery("get", "/clients");
  if (error?._tag === "CustomError2") {
    return (
      <div>
        <h1>Whoops! Random error!</h1>
        <p>{clients.error.message}</p>
      </div>
    );
  }

  const { data, error } = api.useQuery("get", "/clients");
  if (error?._tag === "CustomError2") {
    return (
      <div>
        <h1>Whoops! Random error!</h1>
        <p>{clients.error.message}</p>
      </div>
    );
  }

But in this case the

_tag

_tag

is:

_tag: "HttpApiDecodeError" | "CustomError2" | "Unauthorized" | undefined

_tag: "HttpApiDecodeError" | "CustomError2" | "Unauthorized" | undefined

Unauthorized

Unauthorized

makes sense cuz my auth middleware can throw that.

CustomError2

CustomError2

is thrown by the handler.

HttpApiDecodeError

HttpApiDecodeError

Unexpected `HttpApiDecodeError` in error handling with openapi-fetch and openapi-react-query

Similar Threads

Unexpected `HttpApiDecodeError` in error handling with openapi-fetch and openapi-react-query

Similar Threads

Similar Threads

Similar Threads