LoginSignup
11
4

More than 3 years have passed since last update.

@setsumaru1992

`yarn graphql-codegen init`をとりあえず実行してみた

Last updated at Posted at 2020-06-06

※これは自分の実行結果とその時の思考メモに過ぎず、それだけの価値しか持たない記事です。ベストプラクティスのような良識を提供できるレベルではありません

概要

yarn graphql-codegen initやってみっていうドキュメント多いけど、
ウィザードの言うことがよくわからない（選択肢から何が生成されるか未知数すぎる）のに、あんまり何を選べばいいか書いてあるドキュメントが見つからなくて困ってました。
探しまくるよりとりあえず打ってみて、エラーになったところから埋めていこうと思ってえいやでコマンド実行してみました。

yarn graphql-codegen initをえいやで実行するとこういうファイル生成されるよ、っていう記事です。
希望の形でなければ、自分のユースケースに沿ってチューニングしていっていただければと思います

先に結論

手順

  • yarn graphql-codegen init後に、codegen.ymlが生成される
  • 上記コマンド実行後にyarn installしてpackage.jsonに書かれたtypescript-operationsとか取り込む必要ある
  • 作りたいqueryまたはmutationの型定義（スキーマ）を書いた~.graphqlファイルを自作する必要がある
  • generateコマンドを打つと~.graphqlファイルに合わせたデータアクセスファイルが生成される

所感

勝手がわからないうちはどんな挙動になるか知るのに使えるけど、慣れたら自分好みのcodegen.ymlを作って好みのプラグイン入れてあげれば良さそうと思いました。

yarn graphql-codegen initを打ってみた

注意

  • URLとアプリ名はダミーの値で置換しており、その部分だけ実際のログと違っております
    • url:http://hogehoge.com:4000/graphql
    • アプリ名:sample_app 
$ yarn add -D @graphql-codegen/cli
...

$ yarn graphql-codegen init
yarn run v1.22.0
$ /root/sample_app/node_modules/.bin/graphql-codegen init

    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.

? What type of application are you building? Application built with React
? Where is your schema?: (path or url) http://hogehoge.com:4000/graphql
? Where are your operations and fragments?: src/**/*.graphql
? Pick plugins: TypeScript (required by other typescript plugins), TypeScri
pt Operations (operations and fragments), TypeScript React Apollo (typed co
mponents and HOCs)
? Where to write the output: src/generated/graphql.tsx
? Do you want to generate an introspection file? Yes
? How to name the config file? codegen.yml
? What script in package.json should run the codegen? generate

    Config file generated at codegen.yml

      $ npm install

    To install the plugins.

      $ npm run generate

    To run GraphQL Code Generator.

Done in 496.46s.

出力されたcodegen.yml

overwrite: true
schema: "http://hogehoge.com:4000/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

適当な.graphqlファイルをsrc配下に作成
（実際はsrcディレクトリなんて作ってなかったからcodegen.ymlのdocuments欄をクエリ置く適当なディレクトリ名に変更）

その後generateコマンド実行

$ yarn generate
yarn run v1.22.0
$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ✔ Generate outputs
Done in 2.02s.

src/generated/graphql.tsxにデータアクセス関数のファイルができた！

以下失敗事例

  1. docker内の通信にも関わらず、ホスト名ではなく、ブラウザで使っているlocalhostを使ってしまったときの出力結果
  2. .graphqlファイルなしで実行時の結果
  3. yarn graphql-codegen init後にyarn installしなかった場合の実行結果 codegen.yml作ったあとにyarn install

docker内の通信にも関わらず、ホスト名ではなく、ブラウザで使っているlocalhostを使ってしまったときの出力結果

docker内の実行だったから他のコンテナへのアクセスはコンテナにつけられたホスト名に対して行わなければいけなかった

$ yarn generate
yarn run v1.22.0
$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/generated/graphql.tsx
      ✖ Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate
    ❯ Generate ./graphql.schema.json
      ✖ Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate


 Found 2 errors

  ✖ src/generated/graphql.tsx
    Failed to load schema from http://localhost:4000/graphql:

        request to http://localhost:4000/graphql failed, reason: co
nnect ECONNREFUSED 127.0.0.1:4000
        FetchError: request to http://localhost:4000/graphql failed
, reason: connect ECONNREFUSED 127.0.0.1:4000
    at ClientRequest.<anonymous> (/root/sample_app/node_modules/node-fetch/li
b/index.js:1455:11)
    at ClientRequest.emit (events.js:311:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:311:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

        GraphQL Code Generator supports:
          - ES Modules and CommonJS exports (export as default or named exp
ort "schema")
          - Introspection JSON File
          - URL of GraphQL endpoint
          - Multiple files with type definitions (glob expression)
          - String in config file

        Try to use one of above options and run codegen again.
    Error: Failed to load schema
        at loadSchema (/root/sample_app/node_modules/@graphql-codegen/cli/bin
.js:407:15)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
    Error: Failed to load schema
        at loadSchema (/root/sample_app/node_modules/@graphql-codegen/cli/bin
.js:407:15)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)

  ✖ ./graphql.schema.json
    Failed to load schema from http://localhost:4000/graphql:

        request to http://localhost:4000/graphql failed, reason: co
nnect ECONNREFUSED 127.0.0.1:4000
        FetchError: request to http://localhost:4000/graphql failed
, reason: connect ECONNREFUSED 127.0.0.1:4000
    at ClientRequest.<anonymous> (/root/sample_app/node_modules/node-fetch/li
b/index.js:1455:11)
    at ClientRequest.emit (events.js:311:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:311:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

        GraphQL Code Generator supports:
          - ES Modules and CommonJS exports (export as default or named exp
ort "schema")
          - Introspection JSON File
          - URL of GraphQL endpoint
          - Multiple files with type definitions (glob expression)
          - String in config file

        Try to use one of above options and run codegen again.
    Error: Failed to load schema
        at loadSchema (/root/sample_app/node_modules/@graphql-codegen/cli/bin
.js:407:15)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
    Error: Failed to load schema
        at loadSchema (/root/sample_app/node_modules/@graphql-codegen/cli/bin
.js:407:15)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)


Something went wrong
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

.graphqlファイルなしで実行時の結果

$ yarn generate
yarn run v1.22.0
$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/generated/graphql.tsx
      ✔ Load GraphQL schemas
      ✖ Load GraphQL documents
        →           - src/**/*.graphql
        Generate
    ❯ Generate ./graphql.schema.json
      ✔ Load GraphQL schemas
      ✖ Load GraphQL documents
        →           - src/**/*.graphql
        Generate


 Found 2 errors

  ✖ src/generated/graphql.tsx
    Error:
          Unable to find any GraphQL type definitions for the following poi
nters:

              - src/**/*.graphql

        at prepareResult (/root/sample_app/node_modules/@graphql-tools/load/i
ndex.cjs.js:573:15)
        at loadTypedefs (/root/sample_app/node_modules/@graphql-tools/load/in
dex.cjs.js:545:12)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async loadDocuments (/root/sample_app/node_modules/@graphql-codege
n/cli/bin.js:427:31)
        at async /root/sample_app/node_modules/@graphql-codegen/cli/bin.js:78
8:55
        at async Task.task (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:634:17)
    Error:
          Unable to find any GraphQL type definitions for the following poi
nters:

              - src/**/*.graphql

        at prepareResult (/root/sample_app/node_modules/@graphql-tools/load/i
ndex.cjs.js:573:15)
        at loadTypedefs (/root/sample_app/node_modules/@graphql-tools/load/in
dex.cjs.js:545:12)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async loadDocuments (/root/sample_app/node_modules/@graphql-codege
n/cli/bin.js:427:31)
        at async /root/sample_app/node_modules/@graphql-codegen/cli/bin.js:78
8:55
        at async Task.task (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:634:17)

  ✖ ./graphql.schema.json
    Error:
          Unable to find any GraphQL type definitions for the following poi
nters:

              - src/**/*.graphql

        at prepareResult (/root/sample_app/node_modules/@graphql-tools/load/i
ndex.cjs.js:573:15)
        at loadTypedefs (/root/sample_app/node_modules/@graphql-tools/load/in
dex.cjs.js:545:12)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async loadDocuments (/root/sample_app/node_modules/@graphql-codege
n/cli/bin.js:427:31)
        at async /root/sample_app/node_modules/@graphql-codegen/cli/bin.js:78
8:55
        at async Task.task (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:634:17)
    Error:
          Unable to find any GraphQL type definitions for the following poi
nters:

              - src/**/*.graphql

        at prepareResult (/root/sample_app/node_modules/@graphql-tools/load/i
ndex.cjs.js:573:15)
        at loadTypedefs (/root/sample_app/node_modules/@graphql-tools/load/in
dex.cjs.js:545:12)
        at processTicksAndRejections (internal/process/task_queues.js:97:5)
        at async loadDocuments (/root/sample_app/node_modules/@graphql-codege
n/cli/bin.js:427:31)
        at async /root/sample_app/node_modules/@graphql-codegen/cli/bin.js:78
8:55
        at async Task.task (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:634:17)


Something went wrong
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarn graphql-codegen init後にyarn installしなかった場合の実行結果

codegen.yml作ったあとにyarn install

$ yarn generate
yarn run v1.22.0
$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/generated/graphql.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unable to find template plugin matching typescript-operations
    ❯ Generate ./graphql.schema.json
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unable to find template plugin matching introspection


 Found 2 errors

  ✖ src/generated/graphql.tsx
    Unable to find template plugin matching 'typescript-operations'
    Install one of the following packages:


    - @graphql-codegen/typescript-operations
    - @graphql-codegen/typescript-operations-template
    - @graphql-codegen/typescript-operations-plugin
    - graphql-codegen-typescript-operations
    - graphql-codegen-typescript-operations-template
    - graphql-codegen-typescript-operations-plugin
    - codegen-typescript-operations
    - codegen-typescript-operations-template
    - typescript-operations
    Error: Unable to find template plugin matching typescript-operations
        at getPluginByName (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:289:11)
    Error: Unable to find template plugin matching typescript-operations
        at getPluginByName (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:289:11)

  ✖ ./graphql.schema.json
    Unable to find template plugin matching 'introspection'
    Install one of the following packages:


    - @graphql-codegen/introspection
    - @graphql-codegen/introspection-template
    - @graphql-codegen/introspection-plugin
    - graphql-codegen-introspection
    - graphql-codegen-introspection-template
    - graphql-codegen-introspection-plugin
    - codegen-introspection
    - codegen-introspection-template
    - introspection
    Error: Unable to find template plugin matching introspection
        at getPluginByName (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:289:11)
    Error: Unable to find template plugin matching introspection
        at getPluginByName (/root/sample_app/node_modules/@graphql-codegen/cl
i/bin.js:289:11)


Something went wrong
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
4