【GraphQL】GraphQLサーバーのセットアップをする

GraphQL とは、Web API を作成する言語の一つです。

https://graphql.org/

バックエンドから REST API を使ってデータを取得する際、バックエンドで指定されたデータ全てを取得します。

例えば、ブラウザに本のタイトルと著者を表示したい場合があるとします。

API が本のタイトルと著者に加え、内容や出版日など設定していた場合、欲しい情報は『タイトル』と『著者』なのに、『内容』と『出版日』という余計なデータも取得することになります。

REAT API に対して GraphQL は、フロントエンド側が『タイトル』と『著者』のみ選択して取得することができます。

早速、GraphQL サーバーのセットアップを始めます。

まずは、フォルダを作成し、ターミナルでnpm initを実行します。

GraphQL のサーバーを作成するには、graphql と apollo-server が必要になります。

graphql とは、GraphQL のスキーマを構築して実行するライブラリです。

apollo-server とは、データのやりとりを定義します。

ターミナルで、npm install --save apollo-server graphqlを実行します。

また、index.js を作成しておきましょう。

まずは、apollo-server のApolloServerとgqlを呼び出します。

次に、gql でスキーマを作成します。

今回は、books にします。

books の右側は、String や Int など型を指定します。

次にリゾルバーを作成します。

リゾルバートは、特定のタイプに紐付けられたデータをやりとりする方法を、ApolloServer に指示します。

Apollo Server にデータを渡す様にします。

最後に、サーバーが立ち上がる様にしましょう。

では、サーバーを起動してみます。

上の画面が表示されましたので、『Query your server』をクリックします。

画面が切り替わりました。

中央の Operations で、どのデータを選択するかを書いていきます。

今回は、1 件しかないので、そのままにし、右上の『ExampleQuery』をクリックします。

先程設定した本のタイトルが表示されました。

例えば、本だけではなく、数量もデータにしたい場合、typeDefs にスキーマを設定します。

リゾルバーも追加します。

サーバーを実行して、GraphQL が変わっているかブラウザで確認します。

books の下に amount を追加して、『ExampleQuery』をクリックします。

amount が追加されました。

配列にしたい場合は、スキーマの型を『[]』で囲みます。

リゾルバーも設定しましょう。

再び、ブラウザで確認すると、

配列が反映されました。

また、配列の中に null があると、

null も表示されます。

null があるとエラーにしたい場合は、スキーマに『!』を追加します。

配列の中に『!』があるのは、books の配列に null がある場合、エラーを返す様にします。

配列の外に『!』があるのは、books 自体が null の場合、エラーを返す様にするからです。

ブラウザで確認すると、

狙い通り、エラーが返ってきました。