はじめに#

fax送信専用サイトiamfax.comではfrontendとbackendの通信にはgraphqlを利用していますが、graphqlを使った通信にfetch関数ではなく、graphql-codegenを使ってgraphqlのスキーマからmutationやquery関数を自動生成しています。

このライブラリを知った時はその利便性に本当に素晴らしい、と驚いたことを覚えています。graphqlを使う予定の方は是非使ってみてください。

今回は、このcode generatorを使った開発の流れやどういう使い方をするのかということをメインに伝えたいため、インストール方法などは解説しません。

この記事に興味を持つ方であれば公式サイトや他のサイト、ChatGPTと楽しくお話しながらインストールで余裕なはずだとも思っています。

code generator の流れ#

code generatorがインストール後、設定ファイル（codegen.ymlかcodegen.ts）で指定した所定のフォルダに.graphqlファイルを配置します。

その後は、だいたいpacakge.jsonのscriptsのところに"gqlgen": "graphql-codegen",と書き、yarn gqlgen と実行するだけです。graphql.tsというコードが生成されます。

このコード生成後、例えばqueryでgetUser, getFaxStatusというのがあれば、useGetUserQuery, useGetFaxStatusQuery が自動生成されます。

updateUser, updateFaxStatusというmutationの場合は、useUpdateUserMutation, useUpdateFaxStatusMutation という形で自動生成されます。

それぞれのmutation, queryの使い方を見てみます。

useQuery 系の使いかた#

次のように使います。

  const {
    loading,
    error,
    data,
    refetch,
  } = useGetUserQuery();

loading, error,refetchが返ってきます。


  if (loading) { // loading guard
    return <div>Loading...</div>;
  }
  if (error) { // error guard
    return <div>{error.message}</div>;
  }

  return (<h1>{data.user.name}</h1>    ); // 描画するコンポーネント

ローディング中は描画しない、エラー時はエラー画面表示、などに対応することができます。 refetch関数については説明はしていませんが、再度クエリーを呼びたい時に使います。例えば状態が変化して再描画したいときです。

queryで引数を渡したい時は、variablesを足します。

また、事後処理をしたい時は、onCompleted とonErrorを足します。queryでcacheを効かせなたくない時はfetchPolicyを足して"network-only"と指定します。まとめると、次のようになります。

  useGetUserQuery({
    variables: {
        id: 1
    },
    onCompleted: (data) => {
        console.log("hello user!")        
    },
    fetchPolicy: "network-only" 
  });

useMutation について#

mutationは、useMutationというふうなものが作られ、次のようにしてMutation関数を取り出します。

    const [updateUserMutation, result] = useUpdateUserMutation(); // updateUserMutationがmutation関数

この関数を呼び出す時は、次のようになります。


    ... 
    updateUserMutation({ // 呼び出したいところで、このように呼べば通信
        variables: {
        age: 10,
        },
        onCompleted: (data) => { // 通信後の処理
        console.log(data);
        },
        onError: (error) => { // 通信失敗時の処理
        console.log(error);
        },  
    })

variablesにはgraphqlの引数を渡します。通信後の処理はonCompleted、通信失敗時の処理はonErrorに書きます。このあたりはqueryと同じです。

と、これだけなのですが、graphqlから自動でquery, mutationを型付で作成してくれてとても便利です。

おすすめプラグイン#

最後におすすめプラグインを紹介します。型チェックをしてくれるプラグインです。 https://www.npmjs.com/package/@newmo/graphql-codegen-plugin-type-guards

例えば帰ってきたuserの型を定義してくれるのですが、次のようなisUserType関数を自動で生成してくれます。

  useGetUserQuery({    
    onCompleted: (data) => {

      if (isUserType(data.user)) { // isUserTypeをつくってくれているので、それをインポートして使う
        // このスコープを抜ければdata.userはuserTypeであることが保証されている。
        console.log( data.user.name)
      } 
    },
  });

何が嬉しいかというと、data.__typenameと,型を自分でチェックする必要があるのですが、このプラグインを入れると自動生成したチェッカーisUserTypeに入れるだけで、data.userはuserType型であると判定されます。

この辺は、実際にやっていって辛いな…と思った人でないとわからないと思いますので、今はこんなのがあるんだな、位で思っていていただければ幸いです。ちなみに、このプラグインは

yarn add @newmo/graphql-codegen-plugin-typescript-type-guards --dev

こんな感じでインストールしています。そして、設定ファイルは次の通り追記します。

schema: http://app:8000/iamfax/graphql/ # GraphQLのエンドポイントのURL
documents: graphql/**/*.graphql # GraphQLのクエリやフラグメントのファイルパス 
generates:
  graphql/generated/graphql.ts: # 出力するファイルパス
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
      - "@newmo/graphql-codegen-plugin-type-guards" # 追加
      
    config:
      nonOptionalTypename: true

インストール方法は書かないと言いましたが、このプラグインはある意味ニッチですので簡単に設定方法を紹介いたしました。

まとめ#

今回はGraphql code generatorの例を紹介しました。他のブログだとインストール作業がメインになっていて何が嬉しいのか結局よくわからない人も多いのでは？と思い、使い方に絞った記事を作成しました。

雰囲気を見て、なんかいいかも！と思った方は公式ブログや他のサイトを見てインストールを頑張ってぜひ使ってみてください。

それでは！

戻る