Next Js Use Data

A.Next Js Use Data.md

Next Js Use Data

fetcher.js

export default async function fetchData(type) {
  const res = await fetch(`https://hacker-news.firebaseio.com/v0/${type}.json`);
  if (res.status !== 200) {
    throw new Error(`Status ${res.status}`);
  }
  return res.json();
}

useData.js

const cache = {};

export default function useData(key, fetcher) {
  if (!cache[key]) {
    let data;
    let promise;
    cache[key] = () => {
      if (data !== undefined) return data;
      if (!promise) promise = fetcher().then((r) => (data = r));
      throw promise;
    }
  }
  return cache[key]();
}

// used like: const storyIds = useData('top', () => fetchData('topstories'))