hackal Posts - Answer Overflow

hackal

Explore posts from servers

•Created by hackal on 3/27/2025 in #❓・help

useFetch not updating data ref when new request is triggered.

This is my simplified version of composable

const projectCache = () => useState("projectCache", () => ref({}))

const useProject = async (projectId: Ref<string>) => {
  const localId = ref(unref(projectId));

  watch(projectId, (newId) => {
    if (projectCache().value[newId]) {
      // project already in cache, we can set localId immediately
      localId.value = newId;
    }
  })

  const {
    data,
    execute,
  } = useFetch(() => `/my/url/${projectId}`, { immediate: false })

  watch(data, (updated) => {
    // new data from api, update cache and set the ID
    projectCache().value[data.value.id] = data.value;
    localId.value = data.value.id;
  })

  // check if we have project in cache
  if (!projectCache().value[unref(projectId)]) {
    // cache miss, we make the request and save to cache
    await execute();
    if (data.value) {
      // add/update data in cache
      projectCache().value[data.value.id] = data.value
    }
  }

  return {
    // always return from cache
    project: computed(() => projectCache().value[unref(localId)])
  }
}

const projectCache = () => useState("projectCache", () => ref({}))

const useProject = async (projectId: Ref<string>) => {
  const localId = ref(unref(projectId));

  watch(projectId, (newId) => {
    if (projectCache().value[newId]) {
      // project already in cache, we can set localId immediately
      localId.value = newId;
    }
  })

  const {
    data,
    execute,
  } = useFetch(() => `/my/url/${projectId}`, { immediate: false })

  watch(data, (updated) => {
    // new data from api, update cache and set the ID
    projectCache().value[data.value.id] = data.value;
    localId.value = data.value.id;
  })

  // check if we have project in cache
  if (!projectCache().value[unref(projectId)]) {
    // cache miss, we make the request and save to cache
    await execute();
    if (data.value) {
      // add/update data in cache
      projectCache().value[data.value.id] = data.value
    }
  }

  return {
    // always return from cache
    project: computed(() => projectCache().value[unref(localId)])
  }
}

I have the following issue. I call the composable in two components and pass the same id (ref) as arg const { data } = await useProject(projectId) when the projectId changes I see that useFetch will fire two requests however watch(data, (updated) => { is called only in one instance. Why that could be?

19 replies

NNuxt

•Created by hackal on 3/12/2025 in #❓・help

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,
    },
  };
});

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.

8 replies

NNuxt

•Created by hackal on 1/14/2025 in #❓・help

[nitro] Dynamic require of "crypto" is not supported

I'm trying to import a package in api route.

import { CodeSandbox } from '@codesandbox/sdk'

const runtimeConfig = useRuntimeConfig()
const sdk = new CodeSandbox(runtimeConfig.codeSandboxApiKey);

export default defineEventHandler(async (event) => {
})

import { CodeSandbox } from '@codesandbox/sdk'

const runtimeConfig = useRuntimeConfig()
const sdk = new CodeSandbox(runtimeConfig.codeSandboxApiKey);

export default defineEventHandler(async (event) => {
})

I'm getting this error:

ERROR  [nitro] [uncaughtException] Dynamic require of "crypto" is not supported

  at <anonymous> (node_modules/@codesandbox/sdk/dist/esm/index.js:11:9)
  at node_modules/uuid/dist/cjs/rng.js (node_modules/@codesandbox/sdk/dist/esm/index.js:197:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/v1.js (node_modules/@codesandbox/sdk/dist/esm/index.js:216:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:626:19)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/Id.js (node_modules/@codesandbox/sdk/dist/esm/index.js:675:18)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:15222:16)

ERROR  [nitro] [uncaughtException] Dynamic require of "crypto" is not supported

  at <anonymous> (node_modules/@codesandbox/sdk/dist/esm/index.js:11:9)
  at node_modules/uuid/dist/cjs/rng.js (node_modules/@codesandbox/sdk/dist/esm/index.js:197:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/v1.js (node_modules/@codesandbox/sdk/dist/esm/index.js:216:20)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/uuid/dist/cjs/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:626:19)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/Id.js (node_modules/@codesandbox/sdk/dist/esm/index.js:675:18)
  at __require2 (node_modules/@codesandbox/sdk/dist/esm/index.js:14:49)
  at node_modules/@codesandbox/pitcher-common/dist/index.js (node_modules/@codesandbox/sdk/dist/esm/index.js:15222:16)

Any idea what is going wrong here?

5 replies

NNuxt

•Created by hackal on 9/19/2024 in #❓・help

Automatic typing of plugins

I have copied 1:1 this https://nuxt.com/docs/guide/recipes/custom-usefetch and I noticed that useNuxtApp().$api is not typed and doing cmd+click will send me to node_modules/nuxt/dist/app/nuxt.d.ts -> interface _NuxtApp. How/where can I check the auto generated types for plugins? I want to see if the issue is with my language server or the type generation.

1 replies

NNuxt

•Created by hackal on 7/30/2024 in #❓・help

Hard time with getting cookies from server to browser

Hi, I have my own REST api with my own JWT+refresh token authentication. I have decided to have a proxy via nuxt server to my API and now i'm trying to implement the refresh token logic for auth. I have implemented simple proxy that also handles the refresh logic but I am having hard time saving the new credentials back to cookies from server to browser where they are stored originally. Am I missing something? Thanks for help. Simple example: app.vue

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

<script lang="ts" setup>
const { data: user } = await useFetch<User>('/api/v1/user');
</script>

server/api/[...route].ts

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

import {appendResponseHeader, H3Event} from "h3";

const refreshCredentials = async (event: H3Event) => {
    const refreshToken = getCookie(event, 'X-Refresh-Token');

    const response = await $fetch.raw<any>('<my api url>/auth/refresh', {
        method: "POST",
        baseURL: baseUrl,
        headers: {
            'X-Refresh-Token': refreshToken,
        }
    }

    const { accessToken, refreshToken } = response._data
  
    appendResponseHeader(event, 'set-cookie', 'X-Access-Token=' + newAccessToken + '; Path=/;')
    setCookie(event, 'X-Access-Token', newAccessToken)
    appendResponseHeader(event, 'set-cookie', 'X-Refresh-Token=' + newRefreshToken + '; Path=/;')
    setCookie(event, 'X-Refresh-Token', newRefreshToken)

    return {
        accessToken,
    }
}

export default defineEventHandler(async (event) => {
    const route = getRouterParam(event, 'route');
    const url = '<my api url>' + route;
    const accessToken = getCookie(event, 'X-Access-Token');

    return $fetch(url, {
        method: event.node.req.method,
        headers: {
            ...event.node.req.headers,
            Authorization: `Bearer ${accessToken}`
        },
        retry: 1,
        retryStatusCodes: [401],
        body,
        onResponse: async (context) => {
            if (context.response.status === 401) {
                const { accessToken } = refreshCredentials(event)

                context.options.headers = {
                    ...context.options.headers,
                    Authorization: `Bearer ${accessToken}`,
                }
            }
        },
    });
})

2 replies

NNuxt

•Created by hackal on 4/25/2023 in #❓・help

Issue with Total Blocking Time in performance metrics in pagespeed

Hi, I'm trying to improve the score on pagespeed but I'm consistently getting Total Blocking Time with 10s+ (50s+ on mobile). https://pagespeed.web.dev/analysis/https-acreom-com/mgnzvfu4vc?form_factor=desktop Only thing it says it that I should minimize main thread work (which took 34seconds). The site is 99% static, with little bit of js for some interactivity. Thanks in advance for any help/suggestions. Hosted with netlify, nuxt version 3.4.2

3 replies

Gaming

Programming