[Nuxt3] Data Fetching 중 소소한 팁 03

1. 개요

 

Nuxt3 으로 프로젝트를 만들어 나가는 와중에, 생각지도 못한 부분에서

 

문제를 겪었는데, 그것이 바로 Data Fetching 중 데이터의 변화가 없는것이었습니다.

 

기존의 axios를 이용하던 방식에서 Nuxt3 의 빌트인 패키지를 사용하는데 있어서

 

굉장히 큰 어려움을 겪고 있네요..

 

데이터의 변화가 없을때, 파라미터를 새로하여 fetching 을 진행 하시기 위해선 useFetch, useAsyncData 등에서

 

제공되는 refresh 인자를 이용하실 수도 있지만,  store나 해당 fetching 함수를 따로 분리하다보면

 

refresh 인자또한 마음대로 사용할 수 없는 상황에 맞닥뜨립니다. 그때

 

사용하실 수 있는 방안이 아래, useFetch 옵션 중 initialCache 라는 옵션을 false로 주는것입니다.

 

export default async <T>(apiUrl: string, opts?: {
   method: string, params?: SearchParams | undefined, body?: BodyInit | Record<string, any> | null | undefined
}) => {
   return useFetch(apiUrl, {
      baseURL: runtimeConfig().apiBaseUrl,
      method: opts?.method,
      params: opts?.params,
      body: opts?.body,
      initialCache: false,
      onRequest({ request, options }) {
         // options.headers = options.headers || {};
         console.log(`[useApiReq] : API 요청`);
         console.log(`[useApiReq] : ${request}`);
      },
      onRequestError({ request, options, error }) {
         console.log(`[useApiReq] : 요청중 오류 발생`);
         console.log(error);
      },
      onResponse({ request, response, options }) {
         console.log(`[useApiReq] : 응답 완료`);
         console.log(`[useApiReq] : ${response.status}`);
      },
      onResponseError({ request, response, options }) {
         console.log(`[useApiReq] : 응답중 오류 발생`);
         console.log(`[useApiReq] : ${response.status}`);
      },
   });
}