Vue Apolloをプライベートのプロジェクトで使うことになってこの2日ちょくちょく触っていたので、軽く基本的な使い方をまとめ。適宜、ドキュメントを参照していたが、若干我流な所があるかもしれない。
Vue Apolloをインストールする
まずはVue Apolloをインストールしましょう。Vueのプロジェクトを持ってない人はVue CLI 3を使えば簡単にプロジェクトを作成することができます。プロジェクトのセットアップ時に、CSSやHTMLのプリプロセッサを指定できたり、TypeScriptを選択できたり、よしなにWebpackをセットアップしてくれたりと狂気的なフロントエンドのセットアップ地獄とおさらばできます。楽しちゃいましょう。
Vue CLIにはブラウザでプロジェクトの様々な設定を管理できるVue CLI UIというモードがあります。詳しい説明は以下の記事に譲るとして。
この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 Apolloをimport
してcreateProvider
にWebSocketのエンドポイントはnull
であるという内容の引数を与えているのみです。これで基本的な設定は終わりです。ここからは実際にVue Apolloを使ってGraphQL側からデータを取ってきましょう。
QueryとMutationの実行
まずはじめにGQLを(急に略しだす)叩く際に使うクエリを確認しましょう。
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_USERS
をimport
します。
import { ALL_USERS } from '../constants/query';
お次にVue ApolloでこのALL_USERS
を叩いてその結果をusers
に代入するように設定します。
apollo: { users: ALL_USERS, },
そして最後に、テンプレート内でusers
をfor文で回してユーザ名を表示するようにします。プリプロセッサにPugを使っているので、普通のHTMLとはちょっと記法が違います。Pugを使ったことない人は感覚で読んでみてください。
<template lang="pug"> div li(v-for="user in users") {{user.username}} </template>
Google Chromeの開発者ツールのNetworkでGQLを叩きに行った情報を除くとちゃんとデータが返ってきていました。
ブラウザ上にもちゃんと表示されています。
これで実際に取得して表示することができました。やったね!
実際に使う Mutation編
ちょっと疲れたのでここは明日(2019/01/21)書きます。