Apollo Client用にContentfulの型定義ファイルを生成する

ContentfulをNext.jsでApollo Clientと使いたかったので、型定義を生成します。postという種類の投稿がある前提で書いています。

筆者はGraphQL/Apolloを触ったばかりなので、型生成などで非効率なやり方をしている可能性があります。

関連パッケージ

$ 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}`,
    },
  },
};

コンフィグに書かずコマンドの引数で済ませてるのは、こちらのリポジトリ様を参考にしたからです。ありがとうございます。

https://github.com/sophiabrandt/nextjs-ecommerce/tree/main/frontend

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関連のエラーを回避します。

全体的な参考

https://qiita.com/Adacchi3/items/e6d14dda4084f6a88812