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 のApolloServergqlを呼び出します。

const { ApolloServer, gql } = require("apollo-server")

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

今回は、books にします。

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

const typeDefs = gql`
  type Query {
    books: String
  }
`

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

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

const resolvers = {
  Query: {
    books: () => {
      return "オズの魔法使"
    },
  },
}

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

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

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

server.listen().then(({ url }) => {
  console.log("🚀  Server ready at " + url)
})

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

image2

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

image3

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

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

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

image4

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

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

const typeDefs = gql`
  type Query {
    books: String
    amount: Int
  }
`

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

const resolvers = {
  Query: {
    books: () => {
      return "オズの魔法使"
    },
    amount: () => {
      return 3
    },
  },
}

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

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

image5

amount が追加されました。

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

const typeDefs = gql`
  type Query {
    books: [String]
    amount: Int
  }
`

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

const resolvers = {
  Query: {
    books: () => {
      return ["オズの魔法使", "風と共に去りぬ"]
    },
    amount: () => {
      return 3
    },
  },
}

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

image6

配列が反映されました。

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

const resolvers = {
  Query: {
    books: () => {
      return ["オズの魔法使", "風と共に去りぬ", null]
    },
    amount: () => {
      return 3
    },
  },
}

image7

null も表示されます。

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

const typeDefs = gql`
  type Query {
    books: [String!]!
    amount: Int
  }
`

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

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

ブラウザで確認すると、

image8

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

ブログ一覧