🚀

Astro.jsでmicroCMSを読み込むまで：一覧取得。

に公開
JavaScript
HTML 5
astrojs
tech

Astro.jsでmicroCMSを読み込む

１ .envの設定

MICROCMS_SERVICE_DOMAIN=xxxx
MICROCMS_API_KEY=yyyyyyyyyyyyyy

・MICROCMS_SERVICE_DOMAINは自分の管理画面URL（https://xxxx.microcms.io/ ）のxxxx部分

・MICROCMS_API_KEYは管理画面右上にあるAPIプレビューをクリックしたいときに表示（下記）される"X-MICROCMS-API-KEY"の値

2 microCMS JavaScript SDKのインストール

npm install microcms-js-sdk

3 microCMSの管理画面にBlogsのapiを作成(例)

4 Astro.jsで、api呼び出し実装する(blogs用)

e.g. /library/microcms/blogs.ts

import type { MicroCMSQueries, MicroCMSListContent } from 'microcms-js-sdk';
import { createClient } from 'microcms-js-sdk';

const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

// 型定義
export type Blog = {
  title: string;
  content: string;
} & MicroCMSListContent;

// Blogs一覧用のAPIの呼び出し
export const getBlogs = async (queries?: MicroCMSQueries) => {
  return await client.getList<Blog>({ endpoint: 'blogs', queries });
};

export const getBlogDetail = async (
  contentId: string,
  queries?: MicroCMSQueries,
) => {
  return await client.getListDetail<Blog>({
    endpoint: 'blogs',
    contentId,
    queries,
  });
};

5 呼び出すページで読み込み実装する

---
import Layout from "../layouts/Layout.astro";

//microCMS呼び出し
import { getBlogs } from "@/library/microcms/blogs";

//fieldsはmicroCMSのapiで設定したAPIスキーマや既存で読み出せる項目()を記入
const response = await getBlogs({ fields: ["id", "title","tag","heroImage","body"] });
---

<Layout title="microCMS Blogs">
  <main>
    <ul>
      {
        response.contents.map((content: any) => (
          <li>
            <a href={content.id}>{content.title}</a>
          </li>
        ))
      }
    </ul>
  </main>
</Layout>

Discussion