⚙️
Apollo Client用にContentfulの型定義ファイルを生成する
ContentfulをNext.jsでApollo Clientと使いたかったので、型定義を生成します。postという種類の投稿がある前提で書いています。
関連パッケージ
$ yarn add -D apollo @types/lodash
$ yarn add @apollo/client graphql lodash deepmerge
apolloって名前が紛らわしいけど、これがcodegen関連のCLIツールらしいです。
configを用意
graphql.config.js
module.exports = {
client: {
service: {
name: 'contentful graphql endpoint',
url: `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}/environments/master?access_token=${process.env.CONTENTFUL_ACCESS_TOKEN}`,
},
},
};
コンフィグに書かずコマンドの引数で済ませてるのは、こちらのリポジトリ様を参考にしたからです。ありがとうございます。
Schemaのダウンロード
.env.local
CONTENTFUL_SPACE_ID=スペースID
CONTENTFUL_ACCESS_TOKEN=アクセストークン
CONTENTFUL_PREVIEW_ACCESS_TOKEN=プレビュートークン
download-schema.sh
#!/bin/bash
# https://stackoverflow.com/questions/43267413/shell-how-to-set-environment-variables-from-env-file
set -a # 環境変数の読み出しってこれであってますかね?
source .env.local
set +a
# memo: add $1 to specify dir
yarn run apollo schema:download --header "Authorization: Bearer $CONTENTFUL_ACCESS_TOKEN" \
--endpoint https://graphql.contentful.com/content/v1/spaces/$CONTENTFUL_SPACE_ID/environments/master $1
package.json
{
"scripts": {
+ "apollo:download": "./download-schema.sh ./src/graphql/generated/schema.json"
},
}
# schemaのダウンロード
$ yarn apollo:download
クエリの用意
src/graphql/post.ts
import { gql } from '@apollo/client';
export const ALLPOST_QUERY = gql`
query AllPostQuery($skip: Int, $limit: Int) {
postCollection(skip: $skip, limit: $limit, order: [sys_firstPublishedAt_DESC]) {
items {
sys {
id
firstPublishedAt
publishedAt
}
title
}
total
}
}
`;
この部分は人によって違います。
型の生成
package.json
{
"scripts": {
"apollo:download": "./download-schema.sh ./src/graphql/generated/schema.json",
+ "apollo:codegen": "apollo client:codegen --target typescript --localSchemaFile ./src/graphql/generated/schema.json --outputFlat --includes \"src/graphql/**/*.ts\" --excludes \"src/graphql/generated/**\" --addTypename ./src/graphql/generated"
},
}
# 型の生成
$ yarn apollo:codegen
src/graphql/generated に型定義が生成されます。
tsconfig.jsonを修正
tsconfig.json
{
- "exclude": ["node_modules"]
+ "exclude": ["node_modules", "src/graphql/generated/globalTypes.ts"]
}
globalTypes.tsを除外して、isolatedModules関連のエラーを回避します。
全体的な参考
Discussion