🔮

GraphQLに入門してみる

2022/10/06に公開約2,800字

GraphQLとは?

https://graphql.org/

公式の解説を翻訳
GraphQL は、API のクエリ言語であり、既存のデータを使用してこれらのクエリを実行するためのランタイムです。GraphQL は、API 内のデータの完全でわかりやすい説明を提供し、クライアントが必要なものだけを正確に要求できるようにし、時間をかけて API を進化させやすくし、強力な開発者ツールを有効にします。

なんだか難しそうですね。全然わからなくて、何度も挫折しました😇
英語版のUdemyの動画と日本語のサイトを組み合わせて学習すると、Hello Worldぐらいはできた😅

https://www.udemy.com/course/graphql-by-example/

https://reffect.co.jp/html/graphql

GraphQLを使うにはApollo Serverというカッコイイ名前のサーバーがいるらしい🧑‍💻
https://www.apollographql.com/docs/apollo-server/

公式の解説を翻訳
Apollo Server は、オープンソースで仕様に準拠した GraphQL サーバーであり、 Apollo Clientを含むすべての GraphQL クライアントと互換性があります。これは、あらゆるソースからのデータを使用できる、本番環境に対応した自己文書化 GraphQL API を構築するための最良の方法です。

Apollo Serverを構築する

チュートリアルは、やってみたけど、コード書き換えて動くのか確かめたくて、BookListSampleなるものを作って、動くか試してみた!

プロジェクトを作る

  1. プロジェクトフォルダを作成する
mkdir backend
cd backend
  1. package.jsonを生成する
npm init -y
  1. apollo-serverとgraphqlのライブラリをインストールする
npm install apollo-server graphql
  1. serverを起動するコードを書く、JavaScriptのファイルを作成する
touch index.js
  1. 変更を自動化できるようにする。
    index.jsファイルの更新を検知でき更新した内容が自動反映できるようにnodemonもインストールを行っておきます。インストール後にnpx nodemon index.jsコマンドを実行するとindex.jsファイルの中身が実行されファイルの変更の監視が開始されます。
npm install --save-dev nodemon 
  1. serverを起動するコマンド
npx nodemon index.js

コードの全体

index.js
// ApolloServerの設定に必要なモジュールを読み込む
const { ApolloServer, gql } = require('apollo-server');
// GraphQLではスキーマを使って型の定義を行う必要がある
const typeDefs = gql`
  type BookListSample {
    id: ID!
    name: String!
    author: String!
  }
  # Queryタイプについてはクライアントが実行するクエリーを定義
  # フィールド毎に名前とクエリーの実行後に戻される型を設定
  type Query {
    search(name: String!): String
    books: [BookListSample]
  }
`;

const books = [
  { id: '1', name: 'Flutterの教科書', author: 'コンブさん' },
  { id: '2', name: '週刊Flutter大学', author: 'Aoiさん' },
  { id: '3', name: 'Flutter学習', author: 'ヒカルさん' },
];
// Queryタイプで定義した戻り値の型通りにどのように処理を行うのかを
// 記述するのがresolver(リゾルバ)
const resolvers = {
  Query: {
    search: (parent, args) => `Book ${args.name}`,
    books: () => books,
  },
};
// GraphQLサーバの起動に作成したスキーマとリゾルバを設定
const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});
// サーバーを起動するコマンド[npx nodemon index.js]
// 停止するまで起動し続ける

サーバーが起動すると、ブラウザでhttp://localhost:4000にアクセスできるようになる。
Apollo Studioが起動する。クラウドベースのツールでApollo Studio Explorerを利用することでブラウザ上からクエリーを実行し動作確認を行うことができるようになる。

定義したクエリを実行すると、ダミーのデータとして、用意したbooks配列の中身を表示することができる。

クエリーは、入力するときにコードの保管機能で表示されるので、入力しやすい。

クエリーを入力して実行する

正しく入力すると画面左に表示されます。

最後に

最近流行ってるので、やってみたかったのですが、まだ難しいなと思い、今回は入門ということで簡単なものを作って理解を深めようとoutputしました。

Discussion

ログインするとコメントできます