Zenn
🌟

Apollo Server でGraphQLを動かしてみる

2022/07/04に公開
GraphQL
JavaScript
Apollo
tech

初めに

GraphQLをjavascriptのサーバーを用いて動かしていこうと思います。
サーバーは以下のような

  • GraphQL.js
  • Apollo Server
  • Express-graphQL

ライブラリが様々ありますが、今回はかなりポピュラーに使われているApollo Serverを使用してみようと思います。

1. プロジェクト作成

$ mkdir graphql-server-example
$ cd graphql-server-example
$ npm init --yes

2. ライブラリのインストール

このコマンドでライブラリをインストールすることができます。

$ npm install apollo-server graphql

3. スキーマの定義

そしてindex.jsを開き、GraphQLのスキーマの定義をしていきます。
GraphQLでは型を以下のように定義します。かなりシンプルに表現することができるので理解しやすいと思います。
index.js

  type Book {
    title: String
    author: String
  }

GraphQLには以下5つのスカラー型と呼ばれる方が存在します。他にもオブジェクト型や列挙型など様々な方が存在します。

  • String（文字列型）
  • Int（整数型）
  • Float（浮動小数点型）
  • Boolean（論理型）
  • ID（ID型）

4. データの定義

スキーマの定義ができたら、同じファイルにデータを定義していきます。
本来であれば、Apollo Serverから取得した値を変数に格納して利用しますが、
今回は変数booksに２つのオブジェクトを入れていきます。

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

5. レゾルバの定義

Step4でデータを定義しましたが、apollo server側はクエリ実行時にこのデータセットを使用することを認識していない状態です。
これを認識させるためにリゾルバーを作成していきます。
Index.js のbooksの変数のデータセットの下に以下を記述します。

// Resolvers define the technique for fetching the types defined in the
// schema. This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    books: () => books,
  },
};

6. Apolloサーバーインスタンスの作成

Step3-5までにスキーマ、データセット、リゾルバーを定義してきました。
この情報を初期化する際にApollo Serverに知らせる必要があります。

// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({
  typeDefs,
  resolvers,
  csrfPrevention: true,
});

// The `listen` method launches a web server.
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

7. サーバーの起動

Apollo serverを起動を以下のコマンドで行います。

$ node index.js
$ 🚀 Server ready at http://localhost:4000/

このlocalhost:4000にアクセスしてこのような画面になっていればサーバーを起動できたことが確認できます。
そしてこの画面の”Query your server” と書かれたボタンを押すとsandboxというクエリを発行することができるsandbox UIというものが立ち上がります。

8. クエリのリクエスト

このsandbox UIでクエリをリクエストしてみましょう。
Operationのタブの部分に以下のクエリをコピー＆ペーストしてみましょう。
GetBooksボタンをクリックしてみると、Responseタブに先ほど定義したデータセットが出力されることがわかります。

query GetBooks {
  books {
    title
    author
  }
}


さらにクエリのauthorを削除してもう一度GetBooksボタンをクリックすると
Titleのデータのみが返却されます。
これでGraphQL特有のフロント側で欲しいデータを能動的に選択し、より効率的に値を得ることができることがわかりました。

まとめ

今回はGraphQLをapollo serverを利用して動かしてみました。
他にも様々なnodeを用いたサーバーがありますが、どれが動かしやすいか確認してみると面白いかもしれません。
今回は基本的な動作になりますが、GraphQLの特徴とapollo serverの動かし方が少しでもわかればと思います。

Discussion