先试着运行一下 `yarn graphql-codegen init`

2 年 ago
科, 颖
7 minutes

这只是我的执行结果和当时的思考备忘录，它只有这么多价值的文章，并不能提供像最佳实践那样的明智水平。

总结

我发现很多关于执行 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"

在src目录下创建一个适当的graphql文件（实际上没有创建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. 使用localhost而不是主机名在docker内部通信时的输出结果

 

    1. 没有.graphql文件的执行结果

 

    1. 如果没有在执行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.
bannerAds