usePrefetchStore.js

const fetcher = (url) => fetch(url).then(response => response.json())

const store = {}

const defaultPrefetchOption = {
  ttl: 1000 * 10,
  resetCache: false,
}

/**
 *
 * 사용법 :
 *
 * 조회 후 캐시를 10초간 보관 후 삭제합니다.
 * ```js
 * const options = { ttl: 1000 * 10, resetCache: false }
 * const { data } = await usePrefetchStore('dashboard', /api/dashboard, options)
 * ```
 *
 * 존재하는 캐시를 제거하고 서버 요청을 통해 다시 캐시를 설정하고 10초간 보관 후 삭제합니다.
 * ```js
 * const options = { ttl: 1000 * 10, resetCache: true }
 * const { data } = await usePrefetchStore('dashboard', /api/dashboard, options)
 * ```
 */
async function usePrefetchStore(key, url, options = {}) {
  // 기본 설정을 전달받은 설정과 합합니다
  const prefetchOptions = Object.assign({}, defaultPrefetchOption, options)

  // true면 기존 캐시를 강제로 제거합니다
  if (prefetchOptions.resetCache) {
    clearCache(key)
  }

  // 캐시에 이미 존재한다면 캐시를 사용합니다.
  if (store[key] && store[key].data) {
    const cache = store[key]
    return { data: cache.data, error: null }
  }

  try {
    // fetch API 를 이용하여 원격 서버에 데이터를 요청합니다.
    const data = await fetcher(url)
    store[key] = { data, error: null }

    // 요청이 완료되면 옵션의 `ttl` 이후에 삭제합니다.
    setTimeout(() => {
      clearCache(key)
    }, prefetchOptions.ttl);

    return { data, error: null }
  } catch (error) {
    // 요청에 에러가 있으면 에러를 리턴합니다.
    return { data: null, error }
  }
}

function clearCache(key) {
  if (store.hasOwnProperty(key)) {
    delete store[key]
  }

  if (!key) {
    store = {}
  }
}

export default usePrefetchStore