Flo Posts - Answer Overflow

Flo

•Created by Flo on 4/22/2024 in #❓・help

API Routing broken

I've seen reports before and I couldn't believe it... and now I'm here. Nitro-Routes:

    '/api/projects/:projectId/os/:resourceType': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/[resourceType]/index.get').default>>>>
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/[resourceType]/index.post').default>>>>
    }
    '/api/projects/:projectId/os/networks': {
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/networks/index.post').default>>>>
    }

    '/api/projects/:projectId/os/:resourceType': {
      'get': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/[resourceType]/index.get').default>>>>
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/[resourceType]/index.post').default>>>>
    }
    '/api/projects/:projectId/os/networks': {
      'post': Simplify<Serialize<Awaited<ReturnType<typeof import('../../server/api/projects/[projectId]/os/networks/index.post').default>>>>
    }

2 concurrent routes: one for :id/os/:resourceType (generic handler) and one for :id/os/networks (edge case handling). Latter only has a post-handler! Code executed (server side):

  const flowApi = $fetch.create({ headers: event.headers, query: queryParams });

  // Get networks
  const networks = await flowApi<Network[]>(
    `/api/projects/${routeParams.id}/os/networks`
  );
  console.log("Got networks: ", networks);

  const flowApi = $fetch.create({ headers: event.headers, query: queryParams });

  // Get networks
  const networks = await flowApi<Network[]>(
    `/api/projects/${routeParams.id}/os/networks`
  );
  console.log("Got networks: ", networks);

This is a get-Request. The edge case handler does not get called, that's correct. The generic get handler gets called - and suddenly the resourceType no longer exists in the event. It should look like (after removing the edge case handler):

    matchedRoute: {
      path: '/api/projects/:projectId/os/:resourceType',
      handlers: [Object],
      params: [Object]
    },
    params: {
      projectId: '05caa06f-ac5a-4ab0-99f4-98fe9380ac99',
      resourceType: 'networks'
    }

    matchedRoute: {
      path: '/api/projects/:projectId/os/:resourceType',
      handlers: [Object],
      params: [Object]
    },
    params: {
      projectId: '05caa06f-ac5a-4ab0-99f4-98fe9380ac99',
      resourceType: 'networks'
    }

It really looks like (with edge handler):

    matchedRoute: {
      path: '/api/projects/:projectId/os/networks',
      handlers: [Object],
      params: [Object]
    },
    params: { projectId: '05caa06f-ac5a-4ab0-99f4-98fe9380ac99' }

    matchedRoute: {
      path: '/api/projects/:projectId/os/networks',
      handlers: [Object],
      params: [Object]
    },
    params: { projectId: '05caa06f-ac5a-4ab0-99f4-98fe9380ac99' }

The matchedRoute points to the correct path. But if it would be really using it, it must fail because there's no get-handler for that path.

9 replies

NNuxt

•Created by Flo on 4/11/2024 in #❓・help

Nuxt build fails in container

(caching issue)

1 replies

NNuxt

•Created by Flo on 4/11/2024 in #❓・help

Preserve types in custom useFetch composable?

Probably just missing typescript knowledge... my custom fetch composable doesn't give me the type hints for the requested route while useFetch does that.

export async function useBetterFetch<T = any>(
  url: string,
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  const requestHeaders = useRequestHeaders(["cookie"]);

  const headers = { ...options.headers, ...requestHeaders };

  return await $fetch<T>(url, { ...options, headers });
}

export async function useBetterFetch<T = any>(
  url: string,
  options: Parameters<typeof $fetch>[1] = {}
): Promise<T> {
  const requestHeaders = useRequestHeaders(["cookie"]);

  const headers = { ...options.headers, ...requestHeaders };

  return await $fetch<T>(url, { ...options, headers });
}

13 replies

NNuxt

•Created by Flo on 4/8/2024 in #❓・help

UI: Disable button on form validation errors

I'm using nuxt ui to show a form to a user. The form is validated using a zod schema (works). The docs say I can access the api using the form ref: I understand this as myForm.errors. Trying to bind this to the disabled-prop of my submit button doesn't do anything...

3 replies

NNuxt

•Created by Flo on 3/31/2024 in #❓・help

Nuxt Layer: Composable from layer not found

Following directory structure:

/workspaces
  /project
    /app (the main nuxt app)
      /server
        /api
          /someHandler.get.ts (I want to use useK8s here)
    /auth (a layer)
    /k8s (another layer)
      /composables
        /k8s.ts (contains an exported function called useK8s)

/workspaces
  /project
    /app (the main nuxt app)
      /server
        /api
          /someHandler.get.ts (I want to use useK8s here)
    /auth (a layer)
    /k8s (another layer)
      /composables
        /k8s.ts (contains an exported function called useK8s)

For unknown reason, I can't use useK8s in someHandler.get.ts. Nuxt complains: ERROR [nuxt] [request error] [unhandled] [500] useK8s is not defined . Yet my app/.nuxt/imports.d.ts contains export { useK8s } from '../../k8s/composables/k8s';

8 replies

NNuxt

•Created by Flo on 3/28/2024 in #❓・help

Autoloading makes things complicated - today: Interfaces for custom module

Probably just a user error... is there a location where I can put my interfaces to be picked up automatically so I don't have to import them everytime I need them?

3 replies

NNuxt

•Created by Flo on 3/26/2024 in #❓・help

Composable for accessing event scoped data?

Given following server middleware:

export default eventHandler(async (event) => {
  // No protection for auth routes
  if (event.path.startsWith("/api/auth")) {
    return;
  }

  const session: Session | null = await getServerSession(event);

  if (session) {
    // To be used throughout the app
    event.context.currentUser = {
      name: session.user?.name,
      email: session.user?.email,
      role: useRoles().getHighestRole(session.roles!),
      uid: session.uid,
      key: session.key,
    } as currentUser;
  }
  ...
  return
}

export default eventHandler(async (event) => {
  // No protection for auth routes
  if (event.path.startsWith("/api/auth")) {
    return;
  }

  const session: Session | null = await getServerSession(event);

  if (session) {
    // To be used throughout the app
    event.context.currentUser = {
      name: session.user?.name,
      email: session.user?.email,
      role: useRoles().getHighestRole(session.roles!),
      uid: session.uid,
      key: session.key,
    } as currentUser;
  }
  ...
  return
}

and an api handler calling a composable useSomeCustomComposable(), is there a way to access the currentUser-object in that composable without passing it through function arguments? Above implementation was an experiment. Happy to change that. Background: That custom composable is used in many routes. For the sake of code dedup, I'd prefer to not extend all calls with something that never changes. I'm propably just blind and it's an easy thing to do, but neither my brain, nor chatgpt were really helpful with that so far.

5 replies

NNuxt

•Created by Flo on 3/26/2024 in #❓・help

Is there an equivalent for `<DevOnly>` for non-component code?

I need to change my NuxtAuthHandler depending on the dev server...

4 replies

NNuxt

•Created by Flo on 3/11/2024 in #❓・help

Can't define server plugin in custom module

I tried following the docs: https://nuxt.com/docs/api/kit/nitro#examples-3 Result: Cannot find name 'defineNitroPlugin'

3 replies

NNuxt

•Created by Flo on 3/11/2024 in #❓・help

Composable in custom module not autoloaded

1 replies

Gaming

Programming