Any ideas to make it work with openapi ?

[npldevfr]

Hi,
I’m using OpenAPI to generate my routes in order to improve the developer experience and have better tracking during development.
I’d like to use Laravel Sanctum for authentication so I don’t have to manage the whole auth logic myself.

I tried something like this:

import type { paths } from '~/types/schema'
import createClient from 'openapi-fetch'

export function getApiClient() {
  const sanctumClient = useSanctumClient()

  return createClient<paths>({
    baseUrl: 'http://localhost:8000/',
    fetch: sanctumClient,
  })
}

Any ideas to make it work ?

[manchenkoff]

Hey @npldevfr , I have never used this library but based on their docs, fetch replacement should work as expected. Can you provide more details on what's failing for you?

[npldevfr]

So @manchenkoff, I looked into this a bit deeper and here is what I found.

The issue occurs because when we use:

const sanctumClient = useSanctumClient()

const client = createClient<paths>({
  baseUrl: "http://localhost:8000",
  fetch: sanctumClient
})

openapi-fetch tries to check the response headers: response.headers.get("Content-Length"). maybe that's why ! This is maybe not the good schema ?

I got an error like :

TypeError: Cannot read properties of undefined (reading 'get')

[manchenkoff]

interesting, can you try this one instead?

const sanctumClient = useSanctumClient()

const client = createClient<paths>({
  baseUrl: "http://localhost:8000",
  fetch: sanctumClient.raw
})

[npldevfr]

I'm getting :

installHook.js:1 Error fetching home: TypeError: Failed to execute 'json' on 'Response': body stream already read
    at coreFetch (index.js:244:44)
    at async index.vue:21:20
    

(openapi-fetch package where is the error)

[manchenkoff]

it looks like they can be a bit incompatible with ofetch instance because it's not exactly the same as native fetch and it needs to read the body before return, maybe some wrapper like this one can help

const client = createClient<paths>({
  baseUrl: "http://localhost:8000",
  fetch: async (request: Request) => {
    const res = await sanctumClient.raw(request.url, {
      method: request.method,
      headers: request.headers,
      body: request.body,
      signal: request.signal,
    });

    return res.clone();
  },
});

[npldevfr]

i used sanctumClient.native and this is working great 🎉, the .raw was returning the same error as above "Failed to execute 'json'..."

import type {paths} from "~/types/schema";
import createClient from "openapi-fetch";

const sanctumClient = useSanctumClient()
const client = createClient<paths>({
  baseUrl: "http://localhost:8000",
  fetch: async (request: Request) => {
    return sanctumClient.native(request.url, {
      method: request.method,
      headers: request.headers,
      body: request.body,
      signal: request.signal,
      credentials: 'include',
    });
  },
})

The other approach I was considering is to move to the HeyApi client; they have an ofetch-based client: https://heyapi.dev/openapi-ts/clients/ofetch

[manchenkoff]

Great! I'm glad it works for you

nit: you should not use credentials: 'include' for 2 reasons:

• it's already set inside of the ofetch instance
• it may not be supported on the target platform (like web workers)

[npldevfr]

thanks for the feedback! makes total sense. I'll get that update !