models-only produces broken output

[hey-api]

models-only produces broken output

[amery]

@amery this is fixed in v0.32.0, thanks for catching! 🤝

thank you for fixing it so quickly!

I'm still curious how you use these models with useFetch()?

I am fairly new to the typescript and reactive world, but I have a types package that exports everything from models and some extra details, then I have a composable wrapping useFetch() injecting content-type and the authentication token like this:

export function useAPI<T>(url: string, opts: UseFetchOptions<T> = {}) {
  const { public: config } = useRuntimeConfig();
  const Authorization = useAuth().tokenStrategy?.token?.get();

  // headers
  const headers = opts.headers || {};
  if (typeof Authorization === 'string') {
    opts.headers = {
      Authorization,
      ...headers,
    };
  }

  const defaults: typeof opts = {
    baseURL: config.apiPrefix,
    key: url,
    server: false,
    headers: {
      Accept: 'application/json',
    },

    onRequest(ctx) {
      useLoadingIndicator().finish();
      return ctx;
    },

    onResponseError({ response }) {
      useLoadingIndicator().finish();

      if (response.status !== 401) {
        throw createError({
          statusCode: response.status,
          statusMessage: response.statusText,
          stack: response._data?.stack,
        });
      }

      redirectToLogin();
    },
  };

  const params = defu(opts, defaults);
  useLoadingIndicator().start();
  return useFetch(url, params);

then per-service composables using it

export function useFunctionTypes(opts: UseFetchOptions<FunctionTypeInfo> = {}) {
  return useAPI<FunctionTypeInfo>('/config/function/types', opts);
}

and finally on .vue files things like

const { data, error, pending, refresh } = await useFunctionsConfig({
  transform: (data):TransformedFunctionCollection => asTransformedFunctionCollection(data),
});

or the same within a pinia store.

I would use generated composables if I could tell you the name of the useFetch wrapper (useAPI in my case) . Explicit import isn't needed with Nuxt but it would be useful for other vue-based frameworks. generating such useFetch wrapper might not be worth pursuing initially. transformations are out of scope, but I need to be able to pass that along.

@mrlubos

[mrlubos]

@jordanshatford i think this is related to #155

Separate issue are those partially exported files

[mrlubos]

@amery i think you'll get a different result if you use the config file, this seems to be related to the CLI options parsing

[mrlubos]

I think we will want to split the type generator into a separate package at some point btw

[mrlubos]

@amery can you share an example call using useFetch()? Curious how you use models with it

[mrlubos]

@amery this is fixed in v0.32.0, thanks for catching! 🤝 I'm still curious how you use these models with useFetch()?

[mrlubos]

Thanks for the additional context @amery. Do you use this wrapper to make POST/PUT requests too?

We'd eventually want to offer this kind of wrappers for clients such as Nuxt too, so this is helpful. I see for example that your URLs aren't type-safe, we could improve it a bit. In the meantime, let me know if there's anything we can do to make your life easier!

[amery]

Thanks for the additional context @amery. Do you use this wrapper to make POST/PUT requests too?

Yes

We'd eventually want to offer this kind of wrappers for clients such as Nuxt too, so this is helpful. I see for example that your URLs aren't type-safe, we could improve it a bit. In the meantime, let me know if there's anything we can do to make your life easier!

Generating the 3-line wrappers would be enough to save me some pain and reduce simple mistakes.

I'll be happy to test such experiments, but my typescript is still too weak to be able to get involved in the code itself yet.