Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発

puku0x
February 22, 2022

VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発

puku0x

February 22, 2022
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. VSCode GraphQL + GraphQL Code Generator
    による快適なフロントエンド開発
    フロントエンドカンファレンス福岡 スピンオフ

    View full-size slide

  2. Noriyuki
    Shinpuku
    Frontend engineer
    Findy Co., Ltd.
    @puku0x
    2

    View full-size slide

  3. @puku0x
    FindyはREST→GraphQL移行中
    3

    View full-size slide

  4. @puku0x
    型の自動生成が欲しい
    4

    View full-size slide

  5. @puku0x
    GraphQL Code Generator
    ● スキーマから型やロジックを生成
    5
    https://www.graphql-code-generator.com/

    View full-size slide

  6. schema: http://localhost:3000/graphql
    documents: ./src/**/*.graphql
    generates:
    ./src/types.ts:
    plugins:
    - typescript
    - typescript-operations
    codegen.yml
    6

    View full-size slide

  7. @puku0x
    APIドキュメントは?
    7

    View full-size slide

  8. @puku0x
    GraphiQL
    8
    https://github.com/graphql/graphiql

    View full-size slide

  9. @puku0x
    良さそう
    9

    View full-size slide

  10. @puku0x
    コード補完も欲しい
    10

    View full-size slide

  11. @puku0x
    GraphiQLも良いけど
    VSCodeでコード補完したい
    (あとシンタックスハイライトも)
    11

    View full-size slide

  12. @puku0x
    VSCode GraphQL
    ● 公式のVS Code拡張
    12
    https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql

    View full-size slide

  13. @puku0x
    勝ったな
    13

    View full-size slide

  14. @puku0x
    👀 設定
    14

    View full-size slide

  15. @puku0x
    🤔 また設定...?
    15

    View full-size slide

  16. @puku0x
    GraphQL Config
    ● GraphQLツールの共通設定
    16
    https://www.graphql-config.com/

    View full-size slide

  17. schema: http://localhost:3000/graphql
    documents: ./src/**/*.graphql
    extensions:
    codegen:
    generates:
    ./src/types.ts:
    plugins:
    - typescript
    - typescript-operartions
    codegen.yml → .graphqlrc.yml
    17

    View full-size slide

  18. @puku0x
    設定ファイル統合できた
    18

    View full-size slide

  19. @puku0x
    HTTPSを使いたい
    19

    View full-size slide

  20. NODE_TLS_REJECT_UNAUTHORIZED=0
    .env
    20

    View full-size slide

  21. @puku0x
    モノレポで使いたい
    21

    View full-size slide

  22. projects:
    my-app:
    schema:
    - https://localhost:3000/graphql
    documents: 'apps/my-app/src/**/*.graphql'
    extensions:

    my-lib:
    schema:
    - https://localhost:3000/graphql
    documents: 'libs/my-lib/src/**/*.graphql'
    extensions:

    Projects
    22

    View full-size slide

  23. $ graphql-codegen --project=my-lib
    プロジェクト単位で実行
    23

    View full-size slide

  24. @puku0x
    Nx +
    @graphql-codegen/near-operation-file-preset
    24

    View full-size slide

  25. @puku0x
    Nx
    ● モノレポ管理 + ビルド環境
    25
    https://nx.dev

    View full-size slide

  26. アプリケーション側 ライブラリ側(型定義の元はこっち)
    26
    generates:
    apps/my-app/src/:
    preset: near-operation-file
    presetConfig:
    baseTypesPath: '~@workspace/my-lib
    folder: __generated__
    plugins:
    - typescript-operations
    - typescript-react-apollo
    generates:
    libs/my-lib/src/__generated__/types.generated.ts:
    plugins:
    - typescript
    libs/my-lib/src:
    preset: near-operation-file
    presetConfig:
    baseTypesPath: '~./types.generated'
    folder: __generated__
    plugins:
    - typescript-operations
    - typescript-react-apollo

    View full-size slide

  27. @puku0x
    まとめ
    ● GraphQLはいいぞ
    ○ 型の自動生成が最高だった
    ○ VSCodeでコード補完
    ○ モノレポ対応
    ■ Nxはいいぞ
    27

    View full-size slide

  28. @puku0x 28
    https://careers.findy.co.jp/
    採用のお知らせ

    View full-size slide

  29. @puku0x
    Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide