🍭
モックを自動生成してくれるgraphql-codegen-typescript-mock-dataが便利だった
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を作成するときなどに重宝しています。もしよかったら使ってみてください!
サンプルは以下に置いておきます。
Discussion