GraphQL

【GraphQL】GraphQLサーバーをTypeScriptへ変換する

作成日：2021年11月18日

更新日：2021年11月18日

前回は、データを追加、削除、更新しました。

【GraphQL】データを追加・削除・更新する

今回は、GraphQL サーバーを TypeScript へ変換します。

コードは、以下のコードを使用します。

まずは、TypeScript と ts-node-dev をインストールします。

ターミナルで、npm install --save-dev typescript ts-node-devを実行します。

試しに、src フォルダの中に、index.ts を作成してみます。

ts
const test: string = "test";
console.log(test);

package.json のscriptsにnodemonとts-node-devが起動する様に設定します。

json
"scripts": {
  "dev": "nodemon --watch './**/*.ts' --exec 'ts-node' src/index.ts"
},

また、package.json のmainをsrc/index.tsにします。

json
"main": "src/index.ts",

試しに、ターミナルで、npm run devを実行してみます。

問題なく、nodemonとts-node-devが起動しました。

ts-config.json を設定します。

json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

index.js のコードを、index.ts へコピーします。

ts
const { ApolloServer } = require("apollo-server");

const { typeDefs } = require("./schema");
const { Query } = require("./resolvers/Query");
const { Category } = require("./resolvers/Category");
const { Book } = require("./resolvers/Book");
const { Mutation } = require("./resolvers/Mutation");
const { books } = require("./database/books");
const { categories } = require("./database/categories");

const db = { books, categories };

const server = new ApolloServer({
  typeDefs,
  resolvers: {
    Query,
    Mutation,
    Category,
    Book,
  },
  context: {
    db,
  },
});

server.listen().then(({ url }) => {
  console.log("🚀  Server ready at " + url);
});

ブラウザで確認すると、

GraphQL が表示されました。

index.js は必要ないので、削除します。

全ての js ファイルを ts ファイルへ修正します。

require で呼び出している部分を、import へ修正します。

ts
import { typeDefs } from "./schema";
import { Query } from "./resolvers/Query";
import { Category } from "./resolvers/Category";
import { Book } from "./resolvers/Book";
import { Mutation } from "./resolvers/Mutation";
import { books } from "./database/books";
import { categories } from "./database/categories";

また、exports.の部分を、export constへ全て修正します。

ts
export const Query = {

次に、データベースをリゾルバーのエクスポートを一元化します。

database フォルダに、index.ts を作成します。

booksとcategoriesをエクスポートします。

ts
export * from "./books";
export * from "./categories";

index.ts のbooksとcategoriesを database の index.ts からインポートします。

ts
import { books, categories } from "./database";

resolvers フォルダ内のリゾルバーも同様に行います。

resolvers/index.ts

ts
export * from "./Query";
export * from "./Mutation";
export * from "./Book";
export * from "./Category";

index.ts

ts
import { Query, Mutation, Book, Category } from "./resolvers";

ブラウザで動作確認を行います。

問題なく、サーバーが起動しました。

全文は、以下のコードです。

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【GraphQL】GraphQLサーバーをTypeScriptへ変換する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する