Helper: URL path composable

[0xjogge]

It's not always that we are fetching things directly via OpenFetch.

One example is PrimeVue's Upload component which takes an url an handles the post for you.

My idea was to have a composable like this:

const { path, responseType } = useApiPath('v1/files');

The path in this case would be http://localhost:1234/v1/files.

In the PrimeVue upload example that would look like this:

const { path, responseType } = useApiPath('v1/files');

<FileUpload
  name="files"
  :multiple="true"
  accept="image/*"
  :url="path"
>
  <template #empty>
    <span>Drag and drop files to here to upload.</span>
  </template>
</FileUpload>

I can see how it could be a bit out of scope for this project. But it would allow to use the type safety even for other things than fetching directly.

[Norbiros]

Do you need the responseType value? Currently you can easily do something like:

import type { paths as ApiPaths } from '#open-fetch-schemas/api'

function useApiPath(path: keyof ApiPaths) {
    return useRuntimeConfig().public.openFetch.api.baseURL + path
}

[0xjogge]

Ah, for what we need right no that is actually perfect! It works as I would have expected.

It also makes sense that paths is available since it's using openapi-typescript under the hood. Thank you! I will close this issue.🙏🏼

[Norbiros]

But it was a bit hard for you to discover this feature, so I'll update the docs with that info

[0xjogge]

Actually, I just realized that it wouldn't work. My example doesn't show it, but it will not work if the urls have ids in them. Because the string that is returned would have the {fileId} placeholders in them.

[Norbiros]

hmm, you could look at this https://openapi-ts.dev/cli#pathparamsastypes

[0xjogge]

Ah cool, will take a look at that. Thank you!🙏🏼