<h2 id="hfa66ac9b59">aspidaを導入</h2><h3 id="hd8d793506b">インストール</h3><pre><code>yarn add @aspida/fetch</code></pre><h2 id="he98e7ef630">使用するAPIスキーマ</h2><h3 id="hcd4e76d427">Articles</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/233d44f1584d46cf9b91f64ad9a0a881/a_microcms-aspida-1.png" alt=""></p><h3 id="h0502f3a90c">tags</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/403a5d694dcc4507bf0570aaeee017cc/a_microcms-aspida-2.png" alt=""></p><h2 id="hf71e62297b">型定義ファイルの作成</h2><h3 id="h802c719757">共通</h3><p>microCMSのAPIのリクエストとレスポンスで使用する共通の型を作成します。<br><br>src/types/api.ts</p><pre><code>export type ContentsResponse&lt;T&gt; = {
&nbsp;contents: T[];
&nbsp;totalCount: number;
&nbsp;offset: number;
&nbsp;limit: number;
};
 
export type ContentResponse&lt;T&gt; = {
&nbsp;id: string;
&nbsp;createdAt: string;
&nbsp;updatedAt: string;
&nbsp;publishedAt: string;
&nbsp;revisedAt: string;
} &amp; T;
 
export type ContentsQuery = {
&nbsp;draftKey?: string;
 offset?: number;
&nbsp;limit?: number;
&nbsp;orders?: string;
&nbsp;q?: string;
&nbsp;fields?: string;
&nbsp;ids?: string;
&nbsp;filters?: string;
&nbsp;depth?: number;
};
 
export type ContentQuery = {
&nbsp;draftKey?: string;
&nbsp;fields?: string;
&nbsp;depth?: number;
};</code></pre><p><br></p><h3 id="hcd4e76d427">Articles</h3><p>記事用のレスポンスの型を作成します。<br><br>src/types/article.ts</p><pre><code>import { ContentsResponse } from "./api";
import { TagResponse } from "./tag";
import { ImageResponse } from "./image";
 
export type ArticlesResponse = ContentsResponse&lt;ArticleResponse&gt;;
 
export type ArticleResponse = ContentResponse&lt;{
&nbsp;title?: string;
&nbsp;body?: string;
&nbsp;tags?: TagResponse[];
&nbsp;image?: ImageResponse;
}&gt;;</code></pre><p><br>タグと画像用の型も作成します。<br><br>src/types/tag.ts</p><pre><code>import { ContentResponse, ContentsResponse } from "./api";
import { ImageResponse } from "./image";
 
export type TagsResponse = ContentsResponse&lt;TagResponse&gt;;
 
export type TagResponse = ContentResponse&lt;{
&nbsp;name?: string;
&nbsp;image?: ImageResponse;
}&gt;;

src/types/image.ts
export type ImageResponse = {
&nbsp;url?: string;
&nbsp;height?: number;
&nbsp;width?: number;
};</code></pre><p><br></p><h2 id="h98cff18434">aspidaの設定</h2><p>プロジェクトルートに <span style="color:#14171a">aspida.config.js を作成します。</span><br><br>aspida.config.js</p><pre><code>module.exports = {
&nbsp;input: "src/apis",
};</code></pre><p><br>aspida用の型定義ファイルを作成します。<br><br>src/apis/articles/index.ts</p><pre><code>import { ContentsQuery } from "src/types/api";
import { ArticlesResponse } from "src/types/article";
 
export type Methods = {
&nbsp;get: {
&nbsp;&nbsp;query?: ContentsQuery;
&nbsp;&nbsp;resBody: ArticlesResponse;
&nbsp;};
};</code></pre><p><br>src/apis/articles/_id@string/index.ts</p><pre><code>import { ContentQuery } from "src/types/api";
import { ArticleResponse } from "src/types/article";
 
export type Methods = {
&nbsp;get: {
&nbsp;&nbsp;query?: ContentQuery;
&nbsp;&nbsp;resBody: ArticleResponse;
&nbsp;};
};</code></pre><p><br></p><h2 id="h82915db38a"><span style="color:#14171a">$api.ts</span>を生成</h2><p>package.json の scripts に "api:build": "aspida" を追加します。<br><br>package.json</p><pre><code>"scripts": {
&nbsp;&nbsp;"dev": "next dev",
&nbsp;&nbsp;"build": "next build",
&nbsp;&nbsp;"start": "next start",
&nbsp;&nbsp;"api:build": "aspida"
&nbsp;}</code></pre><p><br></p><pre><code>yarn api:build</code></pre><p>上記を実行すると、src/apis/$api.ts が生成されます。<br></p><h2 id="h16374f7be1">APIを叩く</h2><p>APIを叩く為の共通設定を utils/api.ts に持たせます。<br><br>utils/api.ts</p><pre><code>import aspida from '@aspida/fetch'
import api from 'src/apis/$api'
 
const fetchConfig: Required&lt;Parameters&lt;typeof aspida&gt;&gt;[1] = {
&nbsp;baseURL: 'https://[YOUR-SERVICE].microcms.io/api/v1/',
&nbsp;throwHttpErrors: true,
&nbsp;headers: {
&nbsp;&nbsp;"X-API-KEY": '[YOUR-API-KEY]',
&nbsp;},
};
 
export const client = api(aspida(fetch, fetchConfig));</code></pre><p><br>シンプルにAPIを呼べるようになりました！</p><pre><code>import { ArticlesResponse } from 'src/types/article'
import { client } from 'src/utils/api'
 
const response = await client.articles.$get()</code></pre><p><br>0件目から、5件取得する場合</p><pre><code>const response = await client.articles.$get({
&nbsp;query: {
&nbsp;&nbsp;offset: 0,
&nbsp;&nbsp;limit: 5,
&nbsp;},
})</code></pre><p><br>IDから1件取得する場合</p><pre><code>const id = 'content-id';
const response = await client.articles._id(id).$get()</code></pre>

PrismCube

microCMS

aspidaで型定義してmicroCMSのAPIにアクセスする