HOSONOKOTAROTech Blog

// ~/services/getPostList.ts

// adapter ディレクトリにある Axios を使った設定ファイルでは instance を作成。
// それを service で利用する仕組みです
import axiosInstance from '~/adapter/axiosInstance';

const getPostList = async (path) => {
  return await axiosInstance.get(path).then((response) => {
    return {
      titleDateList: response.data,
    };
  });
};

// ~/customHooks/useTop.ts

import useSWR from 'swr';

import getPostList from '~/services/getPostList';

const useTop = () => {
  // useSWR 関数の第一引数に getPostList の引数に渡すものを入れる
  // 第二引数に getPostList 関数をそのまま渡す
  // data と error が返ってくる
  // data は API の response、error は any 型の恐らく文字列が返ってくる
  const { data, error } = useSWR('/get/titlelist', getPostList);

  // view 側でうまく利用できるような形にして return する
  // error が無い時かつ、まだ data が返ってきていない状態の時を isLoading という boolean にしている
  // また error は存在するときだけ isError という名前にしている
  return { topResponse: data, isLoading: !error && !data, isError: error };
};

export default useTop;

// ~/pages/App.tsx

const { topResponse, isLoading, isError } = useTop();

// 記事のユニークID、Title、作成日を格納したリストを response から取ります
// ただし、Typescript では response の中身が存在しない可能性があります
// なので ? を使って型解決をしています
const titleDateList = topResponse?.titleDateList;

// ... 省略 ...

{
  titleDateList &&
    titleDateList.map(({ id, title, createDate }) => (
      <ContentBox key={id}>
        <Link to={id}>
          <Title text={title} />
        </Link>
        <Date>{createDate}</Date>
      </ContentBox>
    ));
}

// API から読込中のときに spinner を回してローディング状態を伝えます
{
  isLoading && <Spinner />;
}

// error があったときは、簡潔に error が存在する時に一律のメッセージを表示します
{
  isError && (
    <ContentBox>
      <ErrorMessage />
    </ContentBox>
  );
}

// ... 省略 ...