【GraphQL】Apollo ServerやTypeScriptを使ってGraphQLのAPIを開発する

ホーム
BLOG
【GraphQL】
【GraphQL】Apollo ServerやTypeS…

【GraphQL】
2023.07.07

【GraphQL】Apollo ServerやTypeScriptを使ってGraphQLのAPIを開発する

概要
GraphQLとは
Apollo Serverとは
nodeのインストール
プロジェクトを作成
必要なライブラリをインストール
TypeScriptでセットアップ
設定ファイルの編集
GraphQLスキーマを定義
Data Setを定義
Resolverを定義
ApolloServerのインスタンスを作成
全体のソースコード
サーバーを起動
クエリを実行
ディレクトリの構造
備考
参考

1. 概要

今回はGraphQLでAPIを実装する内容となります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. GraphQLとは

A query language for your API

GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。GraphQLはAPI内のデータについて完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、時間の経過とともにAPIを進化させることを容易にし、強力な開発者ツールを可能にします。
GraphQL | A query language for your API

3. Apollo Serverとは

Apollo Serverはオープンソースで仕様に準拠したGraphQLサーバーであり、Apollo Clientを含むあらゆるGraphQLクライアントと互換性があります。これは、あらゆるソースからのデータを使用できる、プロダクションレディで自己文書化されたGraphQL APIを構築する最良の方法です。
Introduction to Apollo Server – Apollo GraphQL Docs

4. nodeのインストール

こちらを参考

【Node.js】バージョン管理をVoltaに移行する | 株式会社isub

ここからは公式サイトの手順に従い、やってみます。

Get started with Apollo Server – Apollo GraphQL Docs

5. プロジェクトを作成

mkdir graphql-server-example

cd graphql-server-example

6. 必要なライブラリをインストール

npm install @apollo/server graphql

7. TypeScriptでセットアップ

mkdir src

touch src/index.ts

npm install ts-node

npm install --save-dev typescript @types/node

npx tsc --init

8. 設定ファイルの編集

8-1. tsconfig.json

※差し替え

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
  }
}

8-2. package.json

※追加

{
  "type": "module",
  "scripts": {
    "compile": "tsc",
    "start": "npm run compile && node ./dist/index.js"
  },
  "dependencies": {
    "@apollo/server": "^4.7.5",
    "graphql": "^16.7.1",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@types/node": "^20.4.0",
    "typescript": "^5.1.6"
  }
}

9. GraphQLスキーマを定義

※src/index.ts

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `#graphql
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

10. Data Setを定義

※src/index.ts

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

11. Resolverを定義

※src/index.ts

const resolvers = {
  Query: {
    books: () => books,
  },
};

12. ApolloServerのインスタンスを作成

※src/index.ts

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀  Server ready at: ${url}`);

13. 全体のソースコード

※src/index.ts

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `#graphql
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

const resolvers = {
  Query: {
    books: () => books,
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});
  
const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});
  
console.log(`🚀  Server ready at: ${url}`);

14. サーバーを起動

npm start

$ npm start

> start
> npm run compile && node ./dist/index.js


> compile
> tsc

🚀  Server ready at: http://localhost:4000/

15. クエリを実行

http://localhost:4000

15-1-1. Request

query ExampleQuery {
  books {
    title
  }
}

15-1-2. Response

{
  "data": {
    "books": [
      {
        "title": "The Awakening"
      },
      {
        "title": "City of Glass"
      }
    ]
  }
}

15-2-1. Request

query GetBooks {
  books {
    title
    author
  }
}

15-2-2. Response

{
  "data": {
    "books": [
      {
        "title": "The Awakening",
        "author": "Kate Chopin"
      },
      {
        "title": "City of Glass",
        "author": "Paul Auster"
      }
    ]
  }
}

16. ディレクトリの構造

.
├── dist
│   └── index.js
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

17. 備考

今回は公式サイトの手順に従い、Apollo Serverを使用してGraphQLのAPIを経由しデータを取得するシンプルな内容でした。

18. 参考

【GraphQL】Apollo ServerやPrisma・MySQL・TypeScriptを使ってGraphQLのAPIを開発する

投稿者プロフィール

Sondon: 開発好きなシステムエンジニアです。
卓球にハマってます。

制作実績一覧

スマホアプリ（Panko）

※BBQや旅行、パーティー等でお使い下さい
「どこでもあみだくじ」で役割分担
「みんなで割り勘」で楽々精算
参加者にURLを共有するだけ

BE A EXCITING ENGINEER!!

ワクワクする仕事しよう！

採用情報

株式会社isub

神奈川県川崎市高津区溝口２－１６－６シマザキビル２階
044-712-3921

PAGE TOP

【GraphQL】Apollo ServerやTypeScriptを使ってGraphQLのAPIを開発する

1. 概要

2. GraphQLとは

3. Apollo Serverとは

4. nodeのインストール

5. プロジェクトを作成

6. 必要なライブラリをインストール

7. TypeScriptでセットアップ

8. 設定ファイルの編集

9. GraphQLスキーマを定義

10. Data Setを定義

11. Resolverを定義

12. ApolloServerのインスタンスを作成

13. 全体のソースコード

14. サーバーを起動

15. クエリを実行

16. ディレクトリの構造

17. 備考

18. 参考

投稿者プロフィール

最新の投稿

関連記事

【GraphQL】Apollo ServerやPrisma・MySQL…

【GraphQL】Apollo ServerやPrisma・MySQL…

最近の記事

カテゴリー

制作実績一覧

BE A EXCITING ENGINEER!!