NuxtN
Nuxt11mo ago
7 replies
hackal

Plugins not automatically typed

Hi,

Having issues with automatically typing my plugins. Here is my plugin.

import type { FetchOptions } from "ofetch";
import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin(() => {
  const {
    public: { baseUrl },
  } = useRuntimeConfig();
  const { $refreshCredentials } = useNuxtApp();
  const stateAccessToken = useAccessToken();

  const setupAuthHeaders = (options: FetchOptions, token: string) => {
    const headers = (options.headers ||= {});
    if (Array.isArray(headers)) {
      headers.push(["Authorization", `Bearer ${token}`]);
    } else if (headers instanceof Headers) {
      headers.set("Authorization", `Bearer ${token}`);
    } else {
      headers.Authorization = `Bearer ${token}`;
    }
  };

  const api = $fetch.create({
    retryStatusCodes: [401],
    retry: 1,
    baseURL: baseUrl,
    onRequest(context) {
      if (stateAccessToken.value) {
        setupAuthHeaders(context.options, stateAccessToken.value);
      }
    },
    async onResponseError(context) {
      if (context.response?.status !== 401) return;
      const accessToken = await $refreshCredentials();
      if (accessToken === null) return;
      setupAuthHeaders(context.options, accessToken);
    },
  });

  const operatorAPI = (baseUrl: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: baseUrl + "/api/operator",
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  const orgApi = (orgId: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: `${baseUrl}/api/org/${orgId}`,
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  return {
    provide: {
      api,
      orgApi,
      operatorAPI,
    },
  };
});


When I do full text search in my project folder I do not see any generated type for $api, $orgApi or $operatorAPI.

Is there any other you need to help me debug this? Overall I'm having a terrible experience with TS+Nuxt+WebStorm.
Was this page helpful?