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

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

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

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

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

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

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

package.jsonのscriptsnodemonts-node-devが起動する様に設定します。

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

また、package.jsonのmainsrc/index.tsにします。

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

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

image2

問題なく、nodemonts-node-devが起動しました。

ts-config.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へコピーします。

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);
});

ブラウザで確認すると、

image3

GraphQLが表示されました。

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

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

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

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へ全て修正します。

export const Query = {

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

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

bookscategoriesをエクスポートします。

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

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

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

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

resolvers/index.ts

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

index.ts

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

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

image4

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

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

ブログ一覧