🍭

モックを自動生成してくれるgraphql-codegen-typescript-mock-dataが便利だった

Sho Yamane

2021/01/15に公開

GraphQlのサーバーがあるとクライアント側でgraphql-codegen --config codegen.ymlなどのコマンドで以下のような型ファイルが降臨するので大変便利かと思います。

./src/graphql/type.ts

export type Episode = {
  __typename?: 'Episode';
  /** The id of the episode. */
  id?: Maybe<Scalars['ID']>;
  /** The name of the episode. */
  name?: Maybe<Scalars['String']>;
  /** The air date of the episode. */
  air_date?: Maybe<Scalars['String']>;
  /** The code of the episode. */
  episode?: Maybe<Scalars['String']>;
  /** List of characters who have been seen in the episode. */
  characters?: Maybe<Array<Maybe<Character>>>;
  /** Time at which the episode was created in the database. */
  created?: Maybe<Scalars['String']>;
};

それに加えて、ちょっとしたUIを作るときにちょっとしたモックデータが欲しい場合にgraphql-codegen-typescript-mock-dataというgraphql-codegenのプラグインが大変便利だったのでご紹介です。

使い方

$ yarn add @apollo/client graphql

$ yarn add -D @graphql-codegen/cli @graphql-codegen/schema-ast @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo graphql-codegen-typescript-mock-data

codegen.yml

overwrite: true
schema: "https://rickandmortyapi.com/graphql"
generates:
  ./src/graphql/types.ts:
    documents:
      - "./src/**/*.graphql"
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
    config:
      reactApolloVersion: 3
      withHOC: false
      withComponent: false
      withHooks: true
  ./schema.graphql:
    plugins:
      - "schema-ast"
    config:
      includeDirectives: true
      commentDescriptions: true
  ./src/graphql/mocks.ts:
    plugins:
      - typescript-mock-data:
          typesFile: "./types.ts"
          terminateCircularRelationships: true
          scalars:
            DateTime: moment

schemaのURLなど設定は適宜変更してください。

EpisodesByIds.graphql

query {
  episodesByIds(ids: [1, 2]) {
    name
    characters {
      name
    }
  }
}

今回はhttps://rickandmortyapi.com/graphql のschemaを見て適当なgraphqlファイルを作成。

$ npx graphql-codegen --config codegen.yml

すると、./src/graphql/mocks.tsにモックを作成する関数が現れます。

./src/graphql/mocks.ts

export const anEpisode = (overrides?: Partial<Episode>, relationshipsToOmit: Set<string> = new Set()): Episode => {
  relationshipsToOmit.add('Episode');
  return {
    id: overrides && overrides.hasOwnProperty('id') ? overrides.id! : '6d55cfbc-a432-4e88-8866-71f705990e69',
    name: overrides && overrides.hasOwnProperty('name') ? overrides.name! : 'repellat',
    air_date: overrides && overrides.hasOwnProperty('air_date') ? overrides.air_date! : 'molestias',
    episode: overrides && overrides.hasOwnProperty('episode') ? overrides.episode! : 'tempora',
    characters: overrides && overrides.hasOwnProperty('characters') ? overrides.characters! : [relationshipsToOmit.has('Character') ? {} as Character : aCharacter({}, relationshipsToOmit)],
    created: overrides && overrides.hasOwnProperty('created') ? overrides.created! : 'et',
  };
};

sample.ts

// モックデータを普通に作成
const episodeMock1 = anEpisode()
// モックデータの名前を上書きする場合
const episodeMock2 = anEpisode({
  name: "Sho Yamane"
})

自分はStorybookでUIを作成するときなどに重宝しています。もしよかったら使ってみてください！
サンプルは以下に置いておきます。

VALLIS, LLC.Publication

福岡市のシステム開発会社「合同会社VALLIS」のテックブログです。

使い方

Discussion