PrismCube
【Next.js】aspidaで型定義してmicroCMSのAPIにアクセスする

【Next.js】aspidaで型定義してmicroCMSのAPIにアクセスする

3 min read
Next.js React TypeScript microCMS
Table of Contents

aspidaを導入

インストール

Terminal window
yarn add @aspida/fetch

使用するAPIスキーマ

Articles

Articles

Tags

Tags

型定義ファイルの作成

共通

microCMSのAPIのリクエストとレスポンスで使用する共通の型を作成します。

src/types/api.ts
export type ContentsResponse<T> = {
  contents: T[]
  totalCount: number
  offset: number
  limit: number
}


export type ContentResponse<T> = {
  id: string
  createdAt: string
  updatedAt: string
  publishedAt: string
  revisedAt: string
} & T


export type ContentsQuery = {
  draftKey?: string
  offset?: number
  limit?: number
  orders?: string
  q?: string
  fields?: string
  ids?: string
  filters?: string
  depth?: number
}


export type ContentQuery = {
  draftKey?: string
  fields?: string
  depth?: number
}

Articles

記事用のレスポンスの型を作成します。

src/types/article.ts
import { ContentsResponse } from './api'
import { TagResponse } from './tag'
import { ImageResponse } from './image'


export type ArticlesResponse = ContentsResponse<ArticleResponse>


export type ArticleResponse = ContentResponse<{
  title?: string
  body?: string
  tags?: TagResponse[]
  image?: ImageResponse
}>

タグと画像用の型も作成します。

src/types/tag.ts
import { ContentResponse, ContentsResponse } from './api'
import { ImageResponse } from './image'


export type TagsResponse = ContentsResponse<TagResponse>


export type TagResponse = ContentResponse<{
  name?: string
  image?: ImageResponse
}>


src / types / image.ts
export type ImageResponse = {
  url?: string
  height?: number
  width?: number
}

aspidaの設定

プロジェクトルートに aspida.config.js を作成します。

aspida.config.js
module.exports = {
  input: 'src/apis',
}

aspida用の型定義ファイルを作成します。

src/apis/articles/index.ts
import { ContentsQuery } from 'src/types/api'
import { ArticlesResponse } from 'src/types/article'


export type Methods = {
  get: {
    query?: ContentsQuery
    resBody: ArticlesResponse
  }
}
src/apis/articles/_id@string/index.ts
import { ContentQuery } from 'src/types/api'
import { ArticleResponse } from 'src/types/article'


export type Methods = {
  get: {
    query?: ContentQuery
    resBody: ArticleResponse
  }
}

$api.tsを生成

package.json の scripts に “api:build”: “aspida” を追加します。

package.json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "api:build": "aspida"
 }
Terminal window
yarn api:build

上記を実行すると、src/apis/$api.ts が生成されます。

APIを叩く

APIを叩く為の共通設定を utils/api.ts に持たせます。

utils/api.ts
import aspida from '@aspida/fetch'
import api from 'src/apis/$api'


const fetchConfig: Required<Parameters<typeof aspida>>[1] = {
  baseURL: 'https://[YOUR-SERVICE].microcms.io/api/v1/',
  throwHttpErrors: true,
  headers: {
    'X-API-KEY': '[YOUR-API-KEY]',
  },
}


export const client = api(aspida(fetch, fetchConfig))

シンプルにAPIを呼べるようになりました！

import { ArticlesResponse } from 'src/types/article'
import { client } from 'src/utils/api'


const response = await client.articles.$get()

0件目から、5件取得する場合

const response = await client.articles.$get({
  query: {
    offset: 0,
    limit: 5,
  },
})

IDから1件取得する場合

const id = 'content-id'
const response = await client.articles._id(id).$get()