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

$ npx create-next-app@latest next-bff-app --typescript
npx: installed 1 in 1.854s
? Would you like to use ESLint with this project? … No / Yes

next-bff-app
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── pages
│   ├── api
│   │   └── hello.ts
│   ├── _app.tsx
│   ├── _document.tsx
│   └── index.tsx
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
├── README.md
├── styles
│   ├── globals.css
│   └── Home.module.css
└── tsconfig.json

$ cd next-bff-app
$ npm run dev

$ curl http://localhost:3000/api/hello
{"name":"John Doe"}

$ npm install --save-dev @graphql-codegen/cli
$ npm install graphql @apollo/server @apollo/datasource-rest graphql-tag

$ npx graphql-codegen init

type Human implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  starships: [Starship]
  totalCredits: Int
}

type Droid implements Character {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Episode]!
  primaryFunction: String
}

import { gql } from "graphql-tag";

export const typeDefs = gql`
  type Name {
    name: String!
  }
・・・略・・・
  type Mutation {
    addName(input: NameInput!): Name!
    updateName(id: ID!, input: NameInput!): Name!
  }
`;

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`);

query allFilmsWithVariablesQuery($first: Int!) {
  allFilms(first: $first) {
    edges {
      node {
        ...FilmItem
      }
    }
  }
}

overwrite: true
schema: "pages/api/graphql/schema.ts"
documents: "graphql/**/*.graphql"
generates:
  generated/resolvers.d.ts:
    preset: "client"
    plugins: []
  ./graphql.schema.json:
    plugins:
      - "introspection"

$ vi codegen.yml

# 既に生成物がある場合、上書き
overwrite: true
# スキーマファイルの場所
schema: pages/api/graphql/schema.ts
generates:
  # resolvers（サーバー側）の TypeScript 型定義生成設定
  ./generated/resolvers.d.ts:
    plugins:
      - typescript
      # @graphql-codegen/typescript-resolvers
      # resolvers の TypeScript 型定義を生成するプラグイン
      - typescript-resolvers
    config:
      # Apollo Serverを使う場合
      # useIndexSignature: true
      # にする
      # ...と書いてあるが、正確な意味は不明。
      # https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-resolvers
      useIndexSignature: true
      # context（Apollo Serverの共通処理や値。すなわち、今回の場合、dataSources）に型が付く。
      # 生成される resolvers.d.ts に
      # import { Context } from '../../../pages/api/graphql/resolvers';
      # が追加されて、
      # export type AddressResolvers<ContextType = any,・・・
      # が
      # export type AddressResolvers<ContextType = Context,・・・
      # になる。
      # 生成される resolvers.d.ts から相対パスで、指定。
      # resolvers#Contextは、resolvers.tsのtype Contextを見てねという意味。
      contextType: ../../pages/api/graphql/resolvers#Context
  # generated/graphql.ts:は、クライアント側に必要。
  # クライアント側のTypeScript型定義とReact Hooksコード生成設定
  ./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
  }
}

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "codegen": "graphql-codegen --config codegen.yml"
  },

$ 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

$ vi pages/api/graphql/startServerAndCreateNextHandler.ts

import {
  ApolloServer,
  BaseContext,
  ContextFunction,
  HeaderMap,
} from "@apollo/server";
import type { WithRequired } from "@apollo/utils.withrequired";
import { NextApiHandler } from "next";
import { parse } from "url";

interface Options<Context extends BaseContext> {
  context?: ContextFunction<Parameters<NextApiHandler>, Context>;
}

const defaultContext: ContextFunction<[], any> = async () => ({});

function startServerAndCreateNextHandler(
  server: ApolloServer<BaseContext>,
  options?: Options<BaseContext>
): NextApiHandler;
function startServerAndCreateNextHandler<Context extends BaseContext>(
  server: ApolloServer<Context>,
  options: WithRequired<Options<Context>, "context">
): NextApiHandler;
function startServerAndCreateNextHandler<Context extends BaseContext>(
  server: ApolloServer<Context>,
  options?: Options<Context>
) {
  server.startInBackgroundHandlingStartupErrorsByLoggingAndFailingAllRequests();

  const contextFunction = options?.context || defaultContext;

  const handler: NextApiHandler = async (req, res) => {
    const headers = new HeaderMap();

    for (const [key, value] of Object.entries(req.headers)) {
      if (typeof value === "string") {
        headers.set(key, value);
      }
    }

    const httpGraphQLResponse = await server.executeHTTPGraphQLRequest({
      context: () => contextFunction(req, res),
      httpGraphQLRequest: {
        body: req.body,
        headers,
        method: req.method || "POST",
        search: req.url ? parse(req.url).search || "" : "",
      },
    });

    for (const [key, value] of httpGraphQLResponse.headers) {
      res.setHeader(key, value);
    }

    res.statusCode = httpGraphQLResponse.status || 200;

    if (httpGraphQLResponse.body.kind === "complete") {
      res.send(httpGraphQLResponse.body.string);
    } else {
      for await (const chunk of httpGraphQLResponse.body.asyncIterator) {
        res.write(chunk);
      }

      res.end();
    }
  };

  return handler;
}

export { startServerAndCreateNextHandler };

$ vi tsconfig.json

    "downlevelIteration": true,

$ vi pages/api/graphql/index.ts

import { typeDefs } from "./schema";
import { dataSources } from "./data-sources";
import { resolvers } from "./resolvers";
import { ApolloServer } from "@apollo/server";
import { startServerAndCreateNextHandler } from "./startServerAndCreateNextHandler";

const apolloServer = new ApolloServer({ typeDefs, resolvers });
export default startServerAndCreateNextHandler(apolloServer, {
  context: async (req, res) => ({ req, res, dataSources: dataSources() }),
});

const server = new ApolloServer({
  typeDefs,
  resolvers,
  dataSources: () => ({
    givefood: new GiveFoodDataSource(),
  }),
});

$ vi pages/api/graphql/names-api.ts

import { RESTDataSource } from "@apollo/datasource-rest";

export type Name = {
  name: string;
};

type MutationResponse = { status: string; data: Name };

export default class NamesAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = process.env.NAMES_REST_URL || "http://localhost:4000/";
  }

  async getName(nameId: number) {
    return this.get<Name>(`names/${nameId}`);
  }

  async getNames() {
    return this.get<Name[]>(`names`);
  }

  async postName(name: Name) {
    return this.post<MutationResponse>(`names`, { body: name }).then(
      (resp) => resp.data
    );
  }

  async putName(nameId: number, name: Name) {
    return this.put<MutationResponse>(`names/${nameId}`, {
      body: name,
    }).then((resp) => resp.data);
  }
}

$ vi pages/api/graphql/addresses-api.ts

import { RESTDataSource } from "@apollo/datasource-rest";

export type Address = {
  address: string;
};

export default class AddressesAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = process.env.ADDRESSES_REST_URL || "http://localhost:5000/";
  }

  async getAddress(addressId: number) {
    return this.get<Address>(`addresses/${addressId}`);
  }

  async getAddresses() {
    return this.get<Address[]>(`addresses`);
  }
}

$ vi pages/api/graphql/data-sources.ts

import NamesAPI from "./names-api";
import AddressesAPI from "./addresses-api";

export const dataSources = () => ({
  namesAPI: new NamesAPI(),
  addressesAPI: new AddressesAPI(),
});

export type DataSources = ReturnType<typeof dataSources>;

$ vi pages/api/graphql/resolvers.ts

import { Resolvers } from "../../../generated/resolvers";
import { DataSources } from "./data-sources";

export type Context = { dataSources: DataSources };

export const resolvers: Resolvers = {
  Query: {
    // context = GraphQL operation の resolver 全体で共有されるオブジェクト。
    // context = 外部のデータ取得処理 = data-sources.ts に書かれている。
    // { dataSources } = context.dataSources と同意。
    // context は resolver の第三引数に渡され、アクセスできる。
    // その処理内容（クラス名.メソッド）は、names-api.ts、address-api.ts にある。
    name: async (_parent, { id }, { dataSources }) =>
      dataSources.namesAPI.getName(parseInt(id)),
    names: async (_parent, _args, { dataSources }) =>
      dataSources.namesAPI.getNames(),
    address: async (_parent, { id }, { dataSources }) =>
      dataSources.addressesAPI.getAddress(parseInt(id)),
    addresses: async (_parent, _args, { dataSources }) =>
      dataSources.addressesAPI.getAddresses(),
  },
  Mutation: {
    addName: async (_parent, { input }, { dataSources }) =>
      dataSources.namesAPI.postName({ ...input }),
    updateName: async (_parent, { id, input }, { dataSources }) =>
      dataSources.namesAPI.putName(parseInt(id), { ...input }),
  },
};

$ npm run dev

query getNamesAndAddresses {
  names {
    name
  }
  addresses {
    address
  }
}

$ mkdir rest-api-names
$ cd rest-api-names
$ npm init -y
$ npm install typescript --save-dev
$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
$ npm install ts-node body-parser express @types/express
$ vi package.json

  "scripts": {
    "start": "ts-node src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

$ mkdir src
$ vi src/index.ts

import express from "express";
import bodyParser from "body-parser";
import names from "./names-data.json";

type Name = typeof names[0];

const port = 4000;
const app = express();

let dataStore = [...names];

app.use(bodyParser.json());

app.get<{}, Name[]>("/names", (req: any, res: any) => {
  res.json(dataStore);
});

app.get<{ nameId: string }, Name>("/names/:nameId", (req: any, res: any) => {
  res.json(dataStore[parseInt(req.params.nameId)]);
});

app.post<{}, { status: string; data: Name }, Name>(
  "/names",
  (req: any, res: any) => {
    dataStore.push(req.body);
    const newNameId = dataStore.length - 1;
    res.json({ status: "ok", data: dataStore[newNameId] });
  }
);

app.put<{ nameId: string }, { status: string; data: Name }, Name>(
  "/names/:nameId",
  (req: any, res: any) => {
    const nameIdToChange = parseInt(req.params.nameId);
    dataStore = dataStore.map((name, nameId) => {
      if (nameId === nameIdToChange) {
        return req.body;
      }
      return name;
    });
    res.json({ status: "ok", data: dataStore[nameIdToChange] });
  }
);

app.listen(port, () => {
  console.log(`API server started at http://localhost:${port}`);
});

$ vi src/names-data.json

[
  {
    "name": "John Titor"
  },
  {
    "name": "Werner Karl Heisenberg"
  },
  {
    "name": "Walter White"
  }
]

$ npm start

$ mkdir rest-api-addresses
$ cd rest-api-addresses
$ npm init -y
$ npm install typescript --save-dev
$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
$ npm install ts-node body-parser express @types/express
$ vi package.json

  "scripts": {
    "start": "ts-node src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

$ mkdir src
$ vi src/index.ts

import express from "express";
import bodyParser from "body-parser";
import addresses from "./addresses-data.json";

type Address = typeof addresses[0];

const port = 5000;
const app = express();

let dataStore = [...addresses];

app.use(bodyParser.json());

app.get<{}, Address[]>("/addresses", (req: any, res: any) => {
  res.json(dataStore);
});

app.get<{ addressId: string }, Address>(
  "/addresses/:addressId",
  (req: any, res: any) => {
    res.json(dataStore[parseInt(req.params.addressId)]);
  }
);

app.listen(port, () => {
  console.log(`API server started at http://localhost:${port}`);
});

$ vi src/addresses-data.json

[
  {
    "address": "568 Blueberry Blvd, Indian Island, ME 04468"
  },
  {
    "address": "PO Box 230, Skan Falls, NY 13153"
  },
  {
    "address": "224 Blueberry Ct #837, Harkeyville, TX 76877"
  }
]

$ npm start