● apollo client で graphqlからの query の戻り値に型をつける

・ A. 明示的に型を指定する

型 UserData を指定する

const { error, loading, data } = useQuery<UserData>(QUERY_VIEWER)

・B. apollo client:codegen コマンドを使用する

パッケージのインストール

npm i @apollo/client

npm i @graphql-codegen/add
npm i @graphql-codegen/cli

npm i @graphql-codegen/typescript 
npm i @graphql-codegen/typescript-operations 

参考: GraphQL Code Generator(graphql-codegen) おすすめ設定 for TypeScript
@graphql-codegen/typed-document-node を使ってみた - あ、しんのきです

セットアップを実行する

npx graphql-codegen init

いろいろ質問されるので、以下のように答えます

? What type of application are you building? Application built with React
? Where is your schema?: (path or url) http://localhost:4000/graphql
? Where are your operations and fragments?: 何も入力しない
? Where to write the output: src/__generated__/
? Do you want to generate an introspection file? No
? How to name the config file? codegen.ts
? What script in package.json should run the codegen? codegen
Fetching latest versions of selected plugins...

質問を全て答えると package.json に パッケージが追加されているので

npm install

で 追加パッケージをインストールします。

また

  "scripts": {
    "codegen": "graphql-codegen --config codegen.ts"
  },

も追加されています。

ファイル codegen.ts も自動で追加されています

・ codegen.ts の設定を変更する

・1. 自動生成後に prettier をかけるようにする

const config: CodegenConfig = {
  ...........................
  hooks: { afterAllFileWrite: ['prettier --write'] }
}

・2. 自動生成前に query,mutation,subscription を自動生成

npm i -D gql-generator-node @graphql-tools/load @graphql-tools/graphql-file-loader

・自動生成の実行

npm run codegen

・ 自動生成された型を使用する

import { gql } from "@apollo/client";

        const { data } = await client.query({
          query: gql`
            query {
              find {
                id
                name
              }
            }
          `,
        });
        console.log("● data");
        console.log(data);

　↓

        const { data } = await client.query({
          query: gql`
            query {
              find {
                id
                name
              }
            }
          `,
        });
        console.log("● data");
        console.log(data);

graphql-codegen 後に prettier をかけたい
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する