Muhammad Awais
Muhammad Awais
PostsComments
NNuxt
Created by Muhammad Awais on 7/2/2024 in #❓・help
fetch wrapper for api calls
Hello people, I have struggling with creating a nice wrapper around $fetch from a long time now. Here is a complete overview of what I want. A function that I can use for authenticated requests and when a request gives unauthorized error (401) means the current auth token is expired then I want to call refresh token api and update the auth token, retry the previous request with new token. Here is what I have been able to come up with: 
type Request = Parameters<typeof $fetch>[0];

type ExtendedFetchOptions = Parameters<typeof $fetch>[1] & {
  authToken: string;
  refreshTokens: () => Promise<string>;
};

export default async function authorizedRequest<T>(
  request: Request,
  options: ExtendedFetchOptions,
): Promise<API_Response<T>> {
  try {
    const response = await $fetch<API_Response<T>>(request, {
      ...options,
      headers: {
        ...options?.headers,
        Authorization: options.authToken,
      },
      baseURL: useRuntimeConfig().public.baseURL,
    });
    return response;
  } catch (fetchError: any) {
    if (fetchError.statusCode == constants.STATUS_UNAUTHORIZED) {
      try {
        const newToken = await options.refreshTokens();
        options.authToken = newToken;
        return authorizedRequest(request, options);
      } catch (refreshTokenError: any) {
        throw refreshTokenError;
      }
    }
    throw fetchError;
  }
}
type Request = Parameters<typeof $fetch>[0];

type ExtendedFetchOptions = Parameters<typeof $fetch>[1] & {
  authToken: string;
  refreshTokens: () => Promise<string>;
};

export default async function authorizedRequest<T>(
  request: Request,
  options: ExtendedFetchOptions,
): Promise<API_Response<T>> {
  try {
    const response = await $fetch<API_Response<T>>(request, {
      ...options,
      headers: {
        ...options?.headers,
        Authorization: options.authToken,
      },
      baseURL: useRuntimeConfig().public.baseURL,
    });
    return response;
  } catch (fetchError: any) {
    if (fetchError.statusCode == constants.STATUS_UNAUTHORIZED) {
      try {
        const newToken = await options.refreshTokens();
        options.authToken = newToken;
        return authorizedRequest(request, options);
      } catch (refreshTokenError: any) {
        throw refreshTokenError;
      }
    }
    throw fetchError;
  }
}
Please review this and provide your valuable advice. Another thing that I have struggled with a lot is use of useAsyncData or useFetch for requests that don’t involve reactive values. These requests can be signup, login or requests that are needed to be sent on some user action. How should I use my fetch wrapper should I use it with useAsyncData for a much nicer error handling or use try catch Thank you very much
1 replies
NNuxt
Created by Muhammad Awais on 7/1/2024 in #❓・help
Type custom plugins
Hey everyone, I'm creating a custom algolia plugin to perform search. I want to know two things. 1. Is this a good usecase to create a plugin? or should i go for composable 2. how can we type custom plugins Thanks
2 replies
NNuxt
Created by Muhammad Awais on 5/19/2024 in #❓・help
Insert html in head
Hi there, I'm fetching some seo data from a wordpress plugin but it is returning string how can I insert that in the head, Thanks
14 replies
NNuxt
Created by Muhammad Awais on 5/13/2024 in #❓・help
getCachedData or swr: true
I'm using getCachedData for getting chached data but swr can also help with that which one is more helpful?
2 replies
NNuxt
Created by Muhammad Awais on 5/10/2024 in #❓・help
Run time config visible in page source
Hi everyone, I'm using public runtime config to store base url of my backend application but client doesn't want the url to be visible in the page source. Nuxt attaches public configs to window object and those are visible in page source. What can be the better way to sotre base url. I'm using graphql.
13 replies
NNuxt
Created by Muhammad Awais on 5/6/2024 in #❓・help
Design v-html content
Hi everyone, I wanted to ask what is correct and efficient way to design v-html content in nuxt. Thanks!
1 replies
NNuxt
Created by Muhammad Awais on 5/1/2024 in #❓・help
State Management Advice
Hi everyone, I have a lot of nesting components inside a single component in which I need to share the state that means I have to pass nested props that look kinda ugly to me and then the state is also shared among two components on the same page. Currently I'm using Pinia store but that makes it a global state that stays throughout the lifecycle of the whole app. I'm seeking any advice that anybody can give on this. Thanks for your time
3 replies
NNuxt
Created by Muhammad Awais on 4/3/2024 in #❓・help
useAsyncData weird behavior
No description
3 replies