johnk Posts - Answer Overflow

johnk

Explore posts from servers

•Created by johnk on 9/10/2024 in #❓・help

How would I listen for a websocket message in Nuxt 3, for user initiated notifications to users?

Hello, as the title described, I have a websocket server, and I would like users to send notifications to eachother and listen for notifications. How would I do this? There's not any utilities I can use in a typical nuxt plugin. Thank you!

3 replies

NNuxt

•Created by johnk on 8/30/2024 in #❓・help

Type is completely ignored in generated mjs, causes Nuxt #imports issues

Hello, I am using nuxt-open-fetch and all was going well. However it randomly started breaking, and I found out it is because the OpenFetchClient type is completely ignored in the generated .mjs. First, in the nuxt console, I get this error

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

, then in the browser console I get this error

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/nuxt-open-fetch@0.9.1_magicast@0.3.5_rollup@4.21.1_typescript@5.5.4/node_modules/nuxt-open-fetch/dist/runtime/fetch.mjs?v=ef996c48' does not provide an export named 'OpenFetchClient' (at imports.mjs:31:56)

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/nuxt-open-fetch@0.9.1_magicast@0.3.5_rollup@4.21.1_typescript@5.5.4/node_modules/nuxt-open-fetch/dist/runtime/fetch.mjs?v=ef996c48' does not provide an export named 'OpenFetchClient' (at imports.mjs:31:56)

. In the server it has the proper export of

export type OpenFetchClient<Paths> = <ReqT extends Extract<keyof Paths, string>, ....
export declare function openFetchRequestInterceptor(...)
export declare function createOpenFetch<Paths>(...)
export declare function fillPath(...)

export type OpenFetchClient<Paths> = <ReqT extends Extract<keyof Paths, string>, ....
export declare function openFetchRequestInterceptor(...)
export declare function createOpenFetch<Paths>(...)
export declare function fillPath(...)

, but in the browser, fetch.mjs has the content of just

export function openFetchRequestInterceptor(ctx) {
  ctx.request = fillPath(ctx.request, ctx.options.path);
}
export function createOpenFetch(options, localFetch) {
  return (url, opts) => {
    opts = typeof options === "function" ? options(opts) : {
      ...options,
      ...opts
    };
    const $fetch = getFetch(url, opts, localFetch);
    return $fetch(fillPath(url, opts?.path), opts);
  };
}
function getFetch(url, opts, localFetch) {
  if (import.meta.server && localFetch) {
    const isLocalFetch = url[0] === "/" && (!opts.baseURL || opts.baseURL[0] === "/");
    if (isLocalFetch)
      return localFetch;
  }
  return globalThis.$fetch;
}
export function fillPath(path, params = {}) {
  for (const [k, v] of Object.entries(params))
    path = path.replace(`{${k}}`, encodeURIComponent(String(v)));
  return path;
}

export function openFetchRequestInterceptor(ctx) {
  ctx.request = fillPath(ctx.request, ctx.options.path);
}
export function createOpenFetch(options, localFetch) {
  return (url, opts) => {
    opts = typeof options === "function" ? options(opts) : {
      ...options,
      ...opts
    };
    const $fetch = getFetch(url, opts, localFetch);
    return $fetch(fillPath(url, opts?.path), opts);
  };
}
function getFetch(url, opts, localFetch) {
  if (import.meta.server && localFetch) {
    const isLocalFetch = url[0] === "/" && (!opts.baseURL || opts.baseURL[0] === "/");
    if (isLocalFetch)
      return localFetch;
  }
  return globalThis.$fetch;
}
export function fillPath(path, params = {}) {
  for (const [k, v] of Object.entries(params))
    path = path.replace(`{${k}}`, encodeURIComponent(String(v)));
  return path;
}

What do I do to make sure OpenFetchClient is kept in the generated .mjs?

2 replies

NNuxt

•Created by johnk on 4/5/2024 in #❓・help

Set header from server middleware

Hello! I am trying to set the "Authorization" header from server middleware, for an API.

export default defineEventHandler(async (event) => {
    const token = await $fetch('https://xxx.kinde.com/oauth2/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            audience: "https://xxx.kinde.com/api",
            grant_type: "client_credentials",
            client_id: "xxx",
            client_secret: "xxx",
        })
    }) as { access_token: string };

    // I have tried
    event.headers.set('authorization', token.access_token);
    // I have tried
    event.node.req.headers.authorization = token.access_token;
})

export default defineEventHandler(async (event) => {
    const token = await $fetch('https://xxx.kinde.com/oauth2/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            audience: "https://xxx.kinde.com/api",
            grant_type: "client_credentials",
            client_id: "xxx",
            client_secret: "xxx",
        })
    }) as { access_token: string };

    // I have tried
    event.headers.set('authorization', token.access_token);
    // I have tried
    event.node.req.headers.authorization = token.access_token;
})

but nothing seems to be working. I am getting 403 forbidden from my API

  const properties = await $fetch(`https://xxx.kinde.com/api/v1/users/${event.context.params?.user}/properties`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    }
  });

  const properties = await $fetch(`https://xxx.kinde.com/api/v1/users/${event.context.params?.user}/properties`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    }
  });

5 replies

Gaming

Programming