Updating AppFetch, useAppFetch

Fixing various eslint errors

Author: Benoit Ngo

apps/back/src/Controller/HealthCheckController.php

@@ -13,13 +13,13 @@ class HealthCheckController
     #[Route('/healthcheck', name: 'app_health_check')]
     public function index(): JsonResponse
     {
-        return new JsonResponse(['success' => true]);
+        return new JsonResponse(['success' => 'ok']);
     }
 
     #[Route('/healthcheck/logged', name: 'app_health_check_logged')]
     #[IsGranted('IS_AUTHENTICATED_FULLY')]
     public function logged(): JsonResponse
     {
-        return new JsonResponse(['success' => true]);
+        return new JsonResponse(['success' => 'ok']);
     }
 }

apps/back/src/Entity/User.php

@@ -100,6 +100,7 @@ public function jsonSerialize(): mixed
     {
         return [
             'email' => $this->getEmail(),
+            'username' => $this->getUsername(),
         ];
     }
 }

apps/front/.eslintrc.cjs

@@ -2,13 +2,10 @@ require("@rushstack/eslint-patch/modern-module-resolution")
 module.exports = {
     root: true,
     extends: [
-        "plugin:vue/vue3-recommended",
-        "@nuxtjs/eslint-config-typescript",
-        "@vue/eslint-config-airbnb-with-typescript"
+        "@nuxt/eslint-config",
+     //   "plugin:vue/vue3-recommended"
     ],
     rules: {
-        'semi': ["error", "always"],
-        'comma-dangle': "off", // covered by eslint-config-airbnb-with-typescript
-        'space-before-function-paren': "off" // covered by eslint-config-airbnb-with-typescript
+        'semi': ["error", "always"]
     }
 };

apps/front/nuxt.config.ts

@@ -2,10 +2,10 @@
 export default defineNuxtConfig({
   srcDir: 'src/',
   modules: [
-    '@pinia/nuxt',
+    '@pinia/nuxt'
   ],
   runtimeConfig: {
-    API_URL: process.env.API_URL || '',
+    API_URL: process.env.API_URL || ''
   },
   app: {
 
@@ -17,21 +17,21 @@ export default defineNuxtConfig({
       meta: [
         // <meta name="description" content="My amazing site">
         //  { name: 'description', content: 'My amazing site.' }
-      ],
-    },
+      ]
+    }
   },
   css: [
-    '@/assets/styles/main.scss',
+    '@/assets/styles/main.scss'
   ],
   vite: {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@import "@/assets/styles/_functions.scss";@import "@/assets/styles/_variables.scss";@import "@/assets/styles/_mixins.scss";',
-        },
-      },
-    },
-  },
+          additionalData: '@import "@/assets/styles/_functions.scss";@import "@/assets/styles/_variables.scss";@import "@/assets/styles/_mixins.scss";'
+        }
+      }
+    }
+  }
   // ssr: false
 
 });

apps/front/package.json

@@ -6,7 +6,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint nuxt.config.ts --fix ; eslint ./src/"
+    "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck ; eslint ./src/"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
@@ -15,15 +15,15 @@
     "@types/http-proxy": "^1.17.11",
     "@types/lodash": "^4.14.195",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@vue/eslint-config-prettier": "^7.1.0",
     "eslint": "^8.41.0",
-    "eslint-plugin-vue": "^9.14.1",
     "pino-pretty": "^10.0.0",
     "typescript": "^5.0.4",
     "vue-tsc": "^1.6.5"
   },
   "dependencies": {
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "bootstrap": "^5.2.3",
+    "defu": "^6.1.2",
     "h3": "^1.6.6",
     "nitropack": "^2.4.1",
     "nuxt": "3.5.1",

apps/front/src/components/layout/menu/AppMenu.vue

@@ -2,7 +2,10 @@
   <div
     class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top"
   >
-    <NuxtLink to="/" class="d-block p-3 link-dark text-decoration-none">
+    <NuxtLink
+      to="/"
+      class="d-block p-3 link-dark text-decoration-none"
+    >
       <icons1-square-fill />
     </NuxtLink>
     <ul

apps/front/src/components/layout/menu/MenuItem.vue

@@ -1,6 +1,9 @@
 <template>
   <li class="nav-item">
-    <NuxtLink v-bind="$attrs" class="nav-link py-3 px-2">
+    <NuxtLink
+      v-bind="$attrs"
+      class="nav-link py-3 px-2"
+    >
       <slot />
     </NuxtLink>
   </li>

apps/front/src/composables/api/auth/useLogin.ts

@@ -1,14 +1,14 @@
 import { Me } from './useMe';
 
-export default function useLogin(): (email: string, password: string | undefined) => Promise<Me> {
+export default function useLogin (): (email: string, password: string | undefined) => Promise<Me> {
   const { $appFetch } = useNuxtApp();
   return async (email: string, password: string | undefined) => {
     const response = await $appFetch<Me>('/api/1.0/auth/sso/saml2/login', {
       method: 'post',
       body: {
         username: email,
-        password,
-      },
+        password
+      }
     });
     if (!response) {
       throw createError('/api/1.0/auth/sso/saml2/login has an empty body, the profile (me) should be returned');

apps/front/src/composables/api/auth/useMe.ts

@@ -2,7 +2,7 @@ export interface Me {
   username: string;
 }
 
-export default function useMe(): () => Promise<Me> {
+export default function useMe (): () => Promise<Me> {
   const { $appFetch } = useNuxtApp();
   return async () => {
     const res = await $appFetch<Me>('/api/1.0/auth/me');

apps/front/src/composables/api/healthCheck/useHealthCheckFetch.ts

@@ -0,0 +1,12 @@
+import { FetchError } from 'ofetch';
+import { AsyncData } from '#app';
+import useAppFetch from '~/composables/useAppFetch';
+
+interface LoggedHealthCheckResponse {
+  success: string
+}
+export function useHealthCheckFetch (): AsyncData<LoggedHealthCheckResponse | null, FetchError | null> {
+  return useAppFetch<LoggedHealthCheckResponse>(
+    () => '/api/1.0/healthcheck/logged'
+  );
+}

apps/front/src/composables/useAppFetch.ts

@@ -1,111 +1,15 @@
-import {
-  AsyncDataOptions,
-  FetchResult,
-  UseFetchOptions,
-  useNuxtApp,
-} from '#app';
-import { NitroFetchRequest } from 'nitropack';
-import { KeyOfRes } from 'nuxt/dist/app/composables/asyncData';
-import { FetchError } from 'ofetch';
-import { hash } from 'ohash';
-import { Ref } from 'vue';
+import type { UseFetchOptions } from 'nuxt/app';
+import { defu } from 'defu';
+import { $Fetch, NitroFetchRequest } from 'nitropack';
 
-// This might break the "pick" strategy from nuxt
-
-type AppReturn<T> = Promise<{
-  data: T;
-  error: Error | unknown | null;
-  pending: boolean;
-  refresh: () => void;
-}>;
-
-// from https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/composables/fetch.ts
-// So we disable our linting to keep similar code
-// We add the ReturnType in the generic so we can type hint API return
-// + we use our own wrapper appFetch
-/* eslint-disable */
-export default function useAppFetch<
-  ReturnType = any,
-  ResT = void,
-  ErrorT = FetchError,
-  ReqT extends NitroFetchRequest = NitroFetchRequest,
-  _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
-  Transform extends (
-    res: _ResT) => any = (res: _ResT) => _ResT,
-  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>,
->(
-  request: Ref<ReqT> | ReqT | (() => ReqT),
-  arg1?: string | UseFetchOptions<_ResT, Transform, PickKeys>,
-  arg2?: string,
-): AppReturn<ReturnType> {
+export default function useAppFetch<T> (url: string | Request | Ref<string | Request> | (() => string | Request), options: UseFetchOptions<T> = {}) {
   const { $appFetch } = useNuxtApp();
-  const [opts = {}, autoKey] = typeof arg1 === 'string' ? [{}, arg1] : [arg1, arg2];
-  const _key = opts.key;
-  hash([
-    autoKey,
-    unref(opts.baseURL),
-    typeof request === 'string' ? request : '',
-    unref(opts.params),
-  ]);
-  if (!_key || typeof _key !== 'string') {
-    throw new TypeError(`[nuxt] [useFetch] key must be a string: ${_key}`);
-  }
-  if (!request) {
-    throw new Error('[nuxt] [useFetch] request is missing.');
-  }
-  const key = _key === autoKey ? `$f${_key}` : _key;
-
-  const _request = computed(() => {
-    let r = request;
-    if (typeof r === 'function') {
-      r = r();
-    }
-    return unref(r);
-  });
-
-  const {
-    server,
-    lazy,
-    default: defaultFn,
-    transform,
-    pick,
-    watch,
-    immediate,
-    ...fetchOptions
-  } = opts;
-
-  const _fetchOptions = reactive({
-    ...fetchOptions,
-    cache: typeof opts.cache === 'boolean' ? undefined : opts.cache,
-  });
-
-  const _asyncDataOptions: AsyncDataOptions<_ResT, Transform, PickKeys> = {
-    server,
-    lazy,
-    default: defaultFn,
-    transform,
-    pick,
-    immediate,
-    watch: [_fetchOptions, _request, ...(watch || [])],
+  const defaults: UseFetchOptions<T> = {
+    $fetch: $appFetch as $Fetch<unknown, NitroFetchRequest>
   };
 
-  let controller: AbortController;
-
-  const asyncData = useAsyncData<_ResT, ErrorT, Transform, PickKeys>(
-    key,
-    () => {
-      controller?.abort?.();
-      controller = typeof AbortController !== 'undefined'
-        ? new AbortController()
-        : ({} as AbortController);
-      return $appFetch(_request.value, {
-        signal: controller.signal,
-        ..._fetchOptions,
-      } as any) as Promise<_ResT>;
-    },
-    _asyncDataOptions,
-  );
+  // for nice deep defaults, please use unjs/defu
+  const params = defu(options, defaults);
 
-  // This force the type
-  return asyncData as unknown as AppReturn<ReturnType>;
+  return useFetch(url, params);
 }

apps/front/src/layouts/anonymous.vue

@@ -2,4 +2,4 @@
   <div>
     <slot />
   </div>
-</template>
+</template>;

apps/front/src/layouts/default.vue

@@ -14,4 +14,4 @@
       </div>
     </div>
   </div>
-</template>
+</template>;

apps/front/src/pages/auth/login.vue

@@ -5,8 +5,15 @@
       <label for="email">
         email
       </label>
-      <input v-model="email" name="email" type="text">
-      <button type="submit" @click="submitAuthenticateUser">
+      <input
+        v-model="email"
+        name="email"
+        type="text"
+      >
+      <button
+        type="submit"
+        @click="submitAuthenticateUser"
+      >
         Log-in
       </button>
     </div>
@@ -17,7 +24,7 @@ import { ref } from 'vue';
 import { useAuthUser } from '~/store/auth';
 
 definePageMeta({
-  layout: 'anonymous',
+  layout: 'anonymous'
 });
 
 const authStore = useAuthUser();

apps/front/src/pages/demo/page1.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     Page 1
-    <img src="~/assets/images/panda.webp" alt="Discover Pandas" />
+    <img
+      src="~/assets/images/panda.webp"
+      alt="Discover Pandas"
+    >
     <div class="panda-background">
       This is to discover background scss
     </div>

apps/front/src/pages/demo/page2.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>Page 2</div>
+  <div>
+    <div>Page 2</div>
+    <div v-if="data">
+      {{ data.success }}
+    </div>
+  </div>
 </template>
+<script lang="ts" setup>
+import { useHealthCheckFetch } from '~/composables/api/healthCheck/useHealthCheckFetch';
+
+const {
+  data
+} = await useHealthCheckFetch();
+</script>

apps/front/src/pages/demo/page3.vue

@@ -1,3 +1,3 @@
 <template>
   <div>Page 3</div>
-</template>
+</template>;

apps/front/src/pages/demo/page4.vue

@@ -1,3 +1,3 @@
 <template>
   <div>Page 4</div>
-</template>
+</template>;

apps/front/src/pages/demo/page5.vue

@@ -1,3 +1,3 @@
 <template>
   <div>Page 5</div>
-</template>
+</template>;

apps/front/src/pages/demo/page6.vue

@@ -1,3 +1,3 @@
 <template>
   <div>Page 6</div>
-</template>
+</template>;