Vue Apolloを使ってみた

akryum.github.io

Vue Apolloをプライベートのプロジェクトで使うことになってこの2日ちょくちょく触っていたので、軽く基本的な使い方をまとめ。適宜、ドキュメントを参照していたが、若干我流な所があるかもしれない。

Vue Apolloをインストールする

まずはVue Apolloをインストールしましょう。Vueのプロジェクトを持ってない人はVue CLI 3を使えば簡単にプロジェクトを作成することができます。プロジェクトのセットアップ時に、CSSやHTMLのプリプロセッサを指定できたり、TypeScriptを選択できたり、よしなにWebpackをセットアップしてくれたりと狂気的なフロントエンドのセットアップ地獄とおさらばできます。楽しちゃいましょう。

Vue CLIにはブラウザでプロジェクトの様々な設定を管理できるVue CLI UIというモードがあります。詳しい説明は以下の記事に譲るとして。

qiita.com

このVue CLI UIのプラグイン検索からおもむろにVue Apolloを検索してから、Vue Apolloの欄の「インストール」をポチっと押すとプロジェクトにVue Apolloが追加されます。インストールは以上です。

Vue Apollo の設定をする

はい、それではまずVue Apolloがアクセスするエンドポイントを設定します。何となく勉強がてらvue-apollo.js の中身を覗いてみると以下のようなコードが転がってました。

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000/graphql'

どうやらVue Apolooは.envファイルで設定されたVUE_APP_GRAHQL_HTTPの値を参照して、もしVUE_APP_GRAHQL_HTTPに値が設定されていなければhttp://localhost:4000/graphqlをエンドポイントとして設定してから実行するらしい。なので、.envファイルにVUE_APP_GRAPHQL_HTTPを設定。僕の場合は、先輩がDjangoとGrapheneを使ってGraphQL側を既に作成済みだったので、そURLを設定。

ついでに以下のようなコードも見かけた。GraphQLのWebSocketのエンドポイントの設定部分のコードみたいです。

  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000/graphql',

これはGraphQLに搭載されているSubscriptionというリアルタイムにデータをやりとりするための機能があるんですが、その機能のための設定ですね。今回、Subscriptionを使う予定がないのでURLは設定しません。「そういう場合はnullを入れてな」とコメントで書いてあったのでnullを入れることにした。そういったことも含めた上でVue側でのVue Apolloの設定しているmain.tsのコードは以下の通りになりました。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import { createProvider } from './vue-apollo';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  apolloProvider: createProvider({
    wsEndpoint: null,
  }),
  render: (h) => h(App),
}).$mount('#app');

簡単ですね。import {createProvider} from './vue-apollo'でVue ApolloimportしてcreateProviderにWebSocketのエンドポイントはnullであるという内容の引数を与えているのみです。これで基本的な設定は終わりです。ここからは実際にVue Apolloを使ってGraphQL側からデータを取ってきましょう。

QueryとMutationの実行

まずはじめにGQLを(急に略しだす)叩く際に使うクエリを確認しましょう。

f:id:kai1233:20190120190520p:plain

GQLでちゃんとデータが取得できるか確認してから、Vue Apolloでクエリを設定しましょう。

さて、ちゃんと投げたクエリに合ったデータがGQLから返ってくるのを確認したら以下のようなファイルを作ります。

import gql from 'graphql-tag';
export const ALL_USERS = gql`
    {
        users{
        id,
        username,
        isSuperuser
        }
    }
    `;

このクエリはすべてのユーザのIDとユーザ名とスーパユーザかどうかを返してくれるクエリで、ALL_USERSという定数名でexportしています。この内容のファイルをVueのプロジェクトのsrcディレクトリのconstantsディレクトリにでも入れておきましょう。Vue ApolloでGQLを叩く時はいちいちクエリを書くのではなく、この様に設定済みのクエリをimportして使います。

実際に使う Query編

さて、クエリの設定も済んだ所でお次はやっとVue ApolloでGQLを叩きにいきますよ。というわけで、ALL_USERSを使ってGQLを叩いて取得した情報を表示してみます。全体のコードは以下のような感じ。

<template lang="pug">
  div
    li(v-for="user in users") {{user.username}}
</template>

<script>
  import { ALL_USERS } from '../constants/query';
  export default {
    data: () => ({
      users: [],
    }),
    apollo: {
      users: ALL_USERS,
    },
  };
</script>

usersに空のリストを代入してます、GQLから情報を取得次第このusersに代入します。

    data: () => ({
      users: [],
    }),

そして先程作成したALL_USERSimportします。

  import { ALL_USERS } from '../constants/query';

お次にVue ApolloでこのALL_USERSを叩いてその結果をusersに代入するように設定します。

    apollo: {
      users: ALL_USERS,
    },

そして最後に、テンプレート内でusersをfor文で回してユーザ名を表示するようにします。プリプロセッサにPugを使っているので、普通のHTMLとはちょっと記法が違います。Pugを使ったことない人は感覚で読んでみてください。

pugjs.org

<template lang="pug">
  div
    li(v-for="user in users") {{user.username}}
</template>

Google Chromeの開発者ツールのNetworkでGQLを叩きに行った情報を除くとちゃんとデータが返ってきていました。

f:id:kai1233:20190120194450p:plain

ブラウザ上にもちゃんと表示されています。

f:id:kai1233:20190120194445p:plain

これで実際に取得して表示することができました。やったね!

実際に使う Mutation編

ちょっと疲れたのでここは明日(2019/01/21)書きます。

まとめ

Vue Apollo簡単に使えちゃう!Vue Apolloとともに良いフロントエンドライフをっ!