🌱

Vue.jsとgraphql-requestを使って、最低限の実装でGraphQL APIを実行する

2023/04/06に公開

GraphQL

Vue.js

tech

はじめに

Vue2 で GraphQL の API を呼び出す方法について、必要最低限の実装を紹介します。
この実装では、GraphQL サーバーとしては、外部公開されている graphql-pokemon を利用し、GraphQL API クライアントは graphql-request を利用します。

実行環境

Vue.js 2.6.11
graphql-request 5.2.0

今回作成したもの

今回作成したものは、ポケモン図鑑の最初の 3 匹（フシギダネ、フシギソウ、フシギバナ）を表示するページです。以下の画像は、実際に作成したページのスクリーンショットです。

手元で動かしたい場合は、以下の CodeSandbox からフォークしてください。
vue2_graphql-request_sample - CodeSandbox

ソースコードの全体像

まずは実際に作成したソースコードを掲載します。以下の章で詳細に説明していきます。

<template>
  <div>
    <h1>ポケモン一覧</h1>
    <div v-if="error">{{ error.message }}</div>
    <div v-else>
      <div v-for="pokemon in pokemons" :key="pokemon.number">
        <div>{{ pokemon.number }}. {{ pokemon.name }}</div>
        <div><img :src="pokemon.image" style="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { request, gql } from "graphql-request";

const query = gql`
  {
    pokemons(first: 9) {
      number
      name
      image
    }
  }
`;

export default Vue.extend({
  data() {
    return {
      error: null,
      pokemons: [],
    };
  },
  async created() {
    try {
      this.pokemons = await this.fetchPokemons();
    } catch (error) {
      this.error = error;
    }
  },
  methods: {
    async fetchPokemons() {
      const data = await request(
        "https://graphql-pokemon-h4r35xwzz-lucasbento.vercel.app/",
        query
      );
      if (data.errors) {
        throw new Error(data.errors[0].message);
      }
      return data["pokemons"];
    },
  },
});
</script>

GraphQL について

ソースコードの解説に入る前に、軽く GraphQL について触れておきます。

GraphQL と REST | GraphQL チュートリアルに記載されている GraphQL と REST の比較が非常にわかりやすいので引用します。

まず、REST として、ユーザーの情報を取得する API と住所情報を取得する API があったとします。REST では、取得するリソースの情報はエンドポイントに持ち、操作情報は HTTP メソッドが持ちます。

引用元: GraphQL と REST | GraphQL チュートリアル

これを GraphQL で表現すると以下のようになります。

GraphQL はエンドポイントを 1 つしか持たず、常に POST リクエストを送ります。リクエストボディに含まれるクエリによって、取得するリソースの情報や操作情報を持ちます。
gif 画像でも表現されている通り、フィールドを指定することにより取得するデータをクライアント側で指定することができます。
操作情報については、query と mutation の 2 つのタイプがあり、REST と比較すると以下のようになります。

リクエスト	REST	GraphQL
データオブジェクトの取得	GET	query
データの挿入	POST	mutation
データの更新/削除	PUT/PATCH/DELETE	mutation
データの監視/サブスクリプション	-	subscription

今回は query を使用していきます。（mutation と subscription については別の機会で触れられればと思います。）

ソースコードの解説

GraphQL に関連する部分に絞って解説していきます。

query の指定

まずは query の指定を行います。
以下の query は、ポケモン図鑑の最初の 3 匹の、図鑑番号、名前、画像を取得します。

const query = gql`
  {
    pokemons(first: 3) {
      number
      name
      image
    }
  }
`;

GraphiQL を使って試しに実行してみることもできます。

query の実行

graphql-request の request メソッドを用いてリクエストを行います。

graphql-request のQuick Start にもある通り、第一引数にエンドポイント、第二引数に query を設定することでリクエストを送ることができます。

methods: {
  async fetchPokemons() {
    const data = await request(
      "https://graphql-pokemon-h4r35xwzz-lucasbento.vercel.app/",
      query
    );

次にエラーのチェックをしています。GraphQL は基本的に 200 のステータスコードを返し、エラーがある場合は errors プロパティに格納されます。
そして、特にエラーがなければポケモンのリストを返します。

    if (data.errors) {
      throw new Error(data.errors[0].message);
    }
    return data["pokemons"];
  },
},

結果を state（data）として保持し、template の中で表示しています。

以上です。

参考

jasonkuhrt/graphql-request: Minimal GraphQL client supporting Node and browsers for scripts or simple apps
favware/graphql-pokemon: Extensive Pokémon GraphQL API
GraphQL と REST | GraphQL チュートリアル