841-biborokuWebフロントエンドの備忘録

aspidaを使ってmicroCMSの記事を取得してタイトルをリスト表示する

microCMSブログ記事「Aspida + microcms-js-sdkを使った型安全なAPI開発を参考にしながらaspida」を参考にaspidaを使い本サイトの記事を取得・表示してみました。


パッケージのインストール

npm i @aspida/fetch


@aspida/axios @aspida/node-fetchなど他にもありますが、参考記事と同じ@aspida/fetchを選択しました。


.envの作成

.env

API_KEY="xxxxxxxxxxxxxxx" //microCMSのAPIキー
CMS_API_URL="https://xxxxx.microcms.io/api/v1"

src/pages/index.tsx

const fetchConfig: Required<Parameters<typeof aspida>>[1] = {
  headers: {
    "X-MICROCMS-API-KEY": process.env.API_KEY || "",
  },
  baseURL: process.env.CMS_API_URL || "",
};

記事のタイトルを表示してみる

src/pages/index.tsx

const fetchPosts = async () => {
  const data = await client.blog.$get();
  return { data };
};
export const getStaticProps = async () => {
  const { data } = await fetchPosts();
  return {
    props: { postsData: data },
  };
};
type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Home: NextPage<Props> = ({ postsData }) => {
  return (
    <>
      <main>
        <div>
          <ul>
            {postsData.contents.map((post: Content) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
        </div>
      </main>
    </>
  );
};

詳細ページを表示する


シェア