Determining the type for Path with openapi-fetch?

[dmckeone]

I'm really liking openapi-typescript and openapi-fetch so far, but I've run into a bit of an issue trying to add Vue reactivity around requests. Disclaimer: I'm by no means a Typescript meta programming expert.

import createClient from "openapi-fetch";
import {ref, Ref} from "vue"

import openapi from "./openapi"; // Generated by openapi-typescript

export type schemas = openapi.components["schemas"]

type ClientType = ReturnType<typeof createClient<openapi.paths>>;
export const client: ClientType = createClient<openapi.paths>({ baseUrl: "/" });

export function useGet<P extends ???>(path: P) {
  const loading: Ref<boolean> = ref(false);
  const error: Ref<string> = ref("");
  const data: Ref<??? | null> = ref(null);

  async function load() {
    loading.value = true;
    try {
      const response = await client.GET(path, {} as never);
      if (response.error != null) {
        error.value = response['error'];
      } else {
        data.value = response['data'];
        error.value = "";
      }
    } finally {
      loading.value = false;
    }
  }

  return {
    data,
    loading,
    error,
    load
  };
}

If anyone could give me some pointers on how to get the right type for path and then the return type for the data in the success case it would be much appreciated.

I've looked at the openapi-fetch code: https://github.com/drwpow/openapi-typescript/blob/main/packages/openapi-fetch/src/index.ts#L91

Just extracting what I saw there didn't seem to work:

export function useGet<P extends PathsWithMethod<openapi.paths, "get">>(path: P) {
}

Neither did:

export function useGet<P extends ClientType['GET']>(path: P) {
}

[drwpow]

In general it’s tough to recreate the full path without redoing all the work from scratch (and possibly accidentally diverging on one step)

Since you have the client defined in that file, you could maybe try:

export function useGet(path: Parameters<typeof client.GET>[0], init: Parameters<typeof client.GET>[1]) {

Avoid specifying a return type if you can help it; the inference should just work correctly and save you from having to do work.

[drwpow]

As an aside, I’d be very interested in either recommending a good approach for Vue like this, or baking this into openapi-fetch. React has a React Query example, but for Vue I wasn’t sure what would be the best ergonomics (especially when thinking about caching / invalidation / deduping / etc).

While I’m not interested in maintaining a full, robust Vue fetch wrapper (I don’t write much Vue these days), I would like to recommend something in the docs to fill the blank recommendation for Vue.

[dmckeone]

Thanks for the feedback. That does help with the argument, but in order to get this fully working I also need a return type for the const data Ref<??? | null> = ref(null); line. Unfortunately, Refs have to be initialized with the return type because it has to be a union with null (or empty object) as an initial state.

As for as Vue examples go: React Query has since been renamed Tanstack Query and there is version for Vue -- https://tanstack.com/query/latest/docs/vue/overview. I referenced the React openapi-fetch example pretty heavily, and it does work almost as-is with Vue. I can throw together a PR of a ported version into Vue 3.

If I can get the return type then I'm happy to ensure a rounded out Vue example

[tom-bywild]

For those still looking for a solution, with openapi-typescript you have access to a paths-type exported, which is a record of all the HTTP-endpoints, incl. query params, etc.

// Import from your *.d.ts-export from openapi-typescript
import { paths } from "./schema";

type AllPaths = keyof paths;