Next.js, graphql-codegen, React Query, Apollo Server v4 で簡易BFF作成（２／２）

$ npx graphql-codegen init

$ vi codegen.yml

# 既に生成物がある場合、上書き
overwrite: true
# スキーマファイルの場所
schema: pages/api/graphql/schema.ts
generates:
  # resolvers（サーバー側）の TypeScript 型定義生成設定
  ./generated/resolvers.d.ts:
    plugins:
      - typescript
      - typescript-resolvers
    config:
      useIndexSignature: true
      contextType: ../../pages/api/graphql/resolvers#Context
  ./generated/graphql.ts:
    documents: "graphql/**/*.graphql"
    plugins:
      - typescript
      # @graphql-codegen/typescript-resolvers
      # documents から TypeScript 型定義を生成するプラグイン
      - typescript-operations
      # documents から React Hooksコード生成するプラグイン
      - typescript-react-query
    config:
      # React Hooks の fetcher に graphql-request を使用
      # 指定しないと fetch が使われる。
      fetcher: graphql-request
      # Hooks を生成するか否か。true,falseにしても生成された。（？）何も変わらないので、コメントアウトしておく。
      # isReactHook: true
      # 生成物に useGetNameQuery.getKey = (variables: GetNameQueryVariables) => ['getName', variables];
      # のように QueryKey を取り出すことができるメソッドが追加される。（['getName', {id: '0'}]のような値がキーとして返る。）
      # react-query は QueryKey を使用してキャッシュを管理する。
      # setQueryData や getQueryData などのメソッドには、このキーが必要。
      # 今回直接react-queryを使っていないため、結局使わない。
      exposeQueryKeys: true
  # introspectionファイルを作成
  ./graphql.schema.json:
    plugins:
      - "introspection"

$ vi package.json

  "devDependencies": {
    "@graphql-codegen/cli": "2.16.2",
    "@graphql-codegen/introspection": "2.2.3",
    "@graphql-codegen/client-preset": "1.2.4"
  }

  "devDependencies": {
    "@graphql-codegen/cli": "2.16.2",
    "@graphql-codegen/introspection": "2.2.3"
  }

$ mkdir pages/api/graphql
$ vi pages/api/graphql/schema.ts

import { gql } from "graphql-tag";

export const typeDefs = gql`
  type Name {
    name: String!
  }

  input NameInput {
    name: String!
  }

  type Address {
    address: String!
  }

  type Query {
    names: [Name!]
    name(id: ID!): Name
    addresses: [Address!]
    address(id: ID!): Address
  }

  type Mutation {
    addName(input: NameInput!): Name!
    updateName(id: ID!, input: NameInput!): Name!
  }
`;

$ mkdir graphql
$ vi graphql/queries.graphql
$ vi graphql/mutations.graphql

query getNames {
  names {
    name
  }
}
query getName($id: ID!) {
  name(id: $id) {
    name
  }
}
query getAddresses {
  addresses {
    address
  }
}
query getAddress($id: ID!) {
  address(id: $id) {
    address
  }
}
query getNamesAndAddresses {
  names {
    name
  }
  addresses {
    address
  }
}
query getNameAndAddress($id: ID!) {
  name(id: $id) {
    name
  }
  address(id: $id) {
    address
  }
}

mutation addName($input: NameInput!) {
  addName(input: $input) {
    name
  }
}
mutation updateName($id: ID!, $input: NameInput!) {
  updateName(id: $id, input: $input) {
    name
  }
}

$ npm install --save-dev @graphql-codegen/typescript-operations
$ npm install --save-dev @graphql-codegen/typescript-react-query
$ npm install --save-dev @graphql-codegen/typescript-resolvers
$ mkdir generated
$ npm install
$ npm run codegen

$ npm install --save-dev @graphql-codegen/cli
$ npm install graphql @apollo/server @apollo/datasource-rest graphql-tag
$ npm install --save-dev @graphql-codegen/typescript-operations
$ npm install --save-dev @graphql-codegen/typescript-react-query
$ npm install --save-dev @graphql-codegen/typescript-resolvers

$ npm install graphql-request @tanstack/react-query @tanstack/react-query-devtools
$ npm install react-toastify
$ npm install unique-names-generator

$ vi pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ToastContainer } from "react-toastify";
// ToastContainerコンポーネント配置と同時にReactToastify.cssを読み込むreact-toastifyの作法
import "react-toastify/dist/ReactToastify.css";

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  return (
    // 全体を通して、React Queryを有効にするため、（今回は、index.tsxだけだが）
    // QueryClientProviderで要素を包みQueryClientをインスタンス化したqueryclientを設定。（必須）
    <QueryClientProvider client={queryClient}>
      {/* react-toastify の ToastContainerコンポーネントを配置 */}
      {/* 注意：index.tsxに配置しても機能しない。親要素に配置が必要。 */}
      <ToastContainer />
      <Component {...pageProps} />
      {/* react-query-devtoolsを初期表示から有効する。 */}
      {/* falseの場合、最初ボタンだけ表示されて、クリックしたら開く。 */}
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  );
}

$ vi pages/index.tsx

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
・・・

import Head from "next/head";
import { GraphQLClient } from "graphql-request";
// graphql-codegen を実行した生成物 graphql.ts から各フック関数を読み込み。
import {
  useGetNamesAndAddressesQuery,
  useGetNameQuery,
  GetNamesAndAddressesQuery,
  useAddNameMutation,
  useUpdateNameMutation,
} from "../generated/graphql";
import { useState } from "react";
// 成功、エラーを表示するために、
// トースト（スッと表れてスッと消える通知メッセージ）を利用
import { toast } from "react-toastify";
// スターウォーズのキャラクタ名をランダムに返す
import { uniqueNamesGenerator, Config, starWars } from "unique-names-generator";

// (alias) new GraphQLClient(url: string, options?: PatchedRequestInit | undefined): GraphQLClient
// 今回は、オプション無しでシンプルにURLのみ指定。環境変数は使わないため、URL固定。
const graphQLClient = new GraphQLClient(
  process.env.NEXT_PUBLIC_GRAPHQL_URL || "http://localhost:3000/api/graphql"
);

// unique-names-generator のスターウォーズのキャラクタ名を使う設定
const config: Config = {
  dictionaries: [starWars],
};

export default function Home() {
  // GetNamesAndAddressesQuery型（名前＆住所が入る）
  // data は、画面表示に使う。
  const [data, setData] = useState<GetNamesAndAddressesQuery | undefined>(
    undefined
  );

  // 全ての名前と住所を返す GraphQL クエリーを実行→レスポンスのJSONを画面に表示
  const res1 = useGetNamesAndAddressesQuery(
    graphQLClient,
    {}, // GraphQLクエリの引数無し
    {
      // ユーザーがブラウザのコンポーネントにフォーカスを当てた時に自動でフェッチが動くのを抑止
      refetchOnWindowFocus: false,
      // ボタンをクリックしたタイミングで起動するため、ここでは実行されない。
      enabled: false,
      // 成功したときのコールバック
      onSuccess(data) {
        // 取得したデータ（JSON）を画面に反映
        setData(data);
      },
      onError(error: any) {
        // エラーの時、トーストに表示（注意：エラーは複数返る可能性がある）
        error.response.errors.forEach((err: any) => {
          toast(err.message, {
            type: "error", // error タイプのデザイン（赤色）
            position: "top-center", // 真ん中の上から出現
          });
        });
      },
    }
  );
  // 最初の名前だけを返す GraphQL クエリーを実行→レスポンスのJSONを画面に表示
  const res2 = useGetNameQuery(
    graphQLClient,
    { id: "0" }, // GraphQLクエリの引数に最初の名前と指定（ハードコード）
    {
      refetchOnWindowFocus: false,
      enabled: false,
      onSuccess(data) {
        setData(data);
      },
      onError(error: any) {
        error.response.errors.forEach((err: any) => {
          toast(err.message, {
            type: "error",
            position: "top-center",
          });
        });
      },
    }
  );
  // 名前を追加する GraphQL クエリーを実行（追加する名前は、ランダムとする。）
  // →成功したら、全ての名前と住所を返す GraphQL クエリーを実行して、レスポンスのJSONを画面に表示
  // Mutation系（取得ではなく、更新系）は、ここでは実行されない。
  const res3 = useAddNameMutation(graphQLClient, {
    onSuccess() {
      // "Name created successfully" とトースト表示
      toast("Name created successfully", {
        autoClose: 1000, // 1秒で消えるように設定
        type: "success", // success タイプのデザイン（緑色）
        position: "top-center", // 真ん中の上から出現
      });
      res1.refetch(); // 全ての名前と住所を返す GraphQL クエリーを実行
    },
    onError(error: any) {
      error.response.errors.forEach((err: any) => {
        toast(err.message, {
          type: "error",
          position: "top-center",
        });
      });
    },
  });
  // 最初の名前を更新する GraphQL クエリーを実行（更新する名前は、ランダムとする。）
  // →成功したら、全ての名前と住所を返す GraphQL クエリーを実行して、レスポンスのJSONを画面に表示
  const res4 = useUpdateNameMutation(graphQLClient, {
    onSuccess() {
      toast("Name updated successfully", {
        autoClose: 1000,
        type: "success",
        position: "top-center",
      });
      res1.refetch(); // 全ての名前と住所を返す GraphQL クエリーを実行
    },
    onError(error: any) {
      error.response.errors.forEach((err: any) => {
        toast(err.message, {
          type: "error",
          position: "top-center",
        });
      });
    },
  });

  // GetNamesAndAddressesQueryボタンクリック
  const onGetNamesAndAddressesQuery = async () => {
    res1.refetch(); // 全ての名前と住所を返す GraphQL クエリーを実行
  };

  // GetNameQueryボタンクリック
  const onGetNameQuery = async () => {
    res2.refetch(); // 最初の名前だけを返す GraphQL クエリーを実行
    // 注意：引数 { id: "0" } は、res2 作成時に指定している。
  };

  // AddNameMutationボタンクリック
  const onAddNameMutation = async () => {
    // スターウォーズのキャラクタ名をランダムに生成
    const characterName: string = uniqueNamesGenerator(config);
    res3.mutate({ input: { name: characterName } }); // 名前を追加する GraphQL クエリーを実行
    // 注意：引数 { input: { name: characterName } } は、ここで指定。
  };

  // UpdateNameMutationボタンクリック
  const onUpdateNameMutation = async () => {
    const characterName: string = uniqueNamesGenerator(config); // 最初の名前を更新する GraphQL クエリーを実行
    res4.mutate({ id: "0", input: { name: characterName } });
    // 注意：引数 { id: "0", input: { name: characterName } } は、ここで指定。
  };

  return (
    <>
      <Head>
        <title>Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <button onClick={onGetNamesAndAddressesQuery}>
        GetNamesAndAddressesQuery
      </button>{" "}
      <button onClick={onGetNameQuery}>GetNameQuery</button>{" "}
      <button onClick={onAddNameMutation}>AddNameMutation</button>{" "}
      <button onClick={onUpdateNameMutation}>UpdateNameMutation</button>
      {/* GraphQLクエリ実行の結果JSONをスペース2個の文字列に整形して<pre></pre>タグで表示 */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </>
  );
}

$ npm run dev