『その1』 Vue.jsとGraphQLとApollo Clientでブログを作るチュートリアル

二度寝したら昼近くになっていて、昼寝をしたら夜になっていて、、みたいな完全に自堕落な自宅でのゴールデンウィークを過ごしておりますが、さすがになんかちょっと勉強でもしなきゃいけないかな？と。。

ということで、ググっていたら、How To Build a Blog With Vue, GraphQL, and Apollo Clientという👇のようなアーキテクチャでブログをチュートリアルが見つかったのでやっていきたいと思います。

SQLite3をインストールしてGraphQLサーバーを起動

今回はadonis-graphql-serverというGraphQLサーバーを使っていきます。

Githubで中身を見ていくと、普通にRDBMSが必要っぽい気がするので、SQLiteをアレしておきます。

https://www.sqlite.org/download.htmlからMac用のヤツを落としてきて、解凍したzipの中身をどこかのディレクトリに配置。

adnis-graphql-serverをGithubからクローンしてきます。

git clone git@github.com:ammezie/adonis-graphql-server.git

.env.exampleをコピって.envというファイルを作ってDB周りを👇のように書き換え。(SQLiteを使うので3306とか要らないと思うけど面倒なのでそのまんま…)

HOST=127.0.0.1
PORT=3333
NODE_ENV=development
CACHE_VIEWS=false
APP_KEY=
DB_CONNECTION=sqlite 👈👈
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=
DB_DATABASE=<<SQLiteを配置したパス>>  👈👈
APP_URL=http://${HOST}:${PORT}

npm installしたけどadonisコマンド叩けなかったので👇してあげて、

$ npm i -g @adonisjs/cli

👇したら『Error: Cannot find module 'sqlite3'』って怒られたので、、

adonis migration:run

👇してあげてから、、

$ npm install sqlite3

👇ようやくや…

$ adonis migration:run
migrate: 1503250034279_user.js
migrate: 1503250034280_token.js
migrate: 1509102709252_post_schema.js
Database migrated successfully in 329 ms

で👇を叩いてあげると、、

$ adonis serve --dev

👇なんか色々言われてるけど、、

👇とりあえずそれっぽい画面は出ているようです。

Enabling CORS (Cross-Origin Resource Sharingを有効に)

ということで、ようやくこのチュートリアルの内容に辿り着けることになりました。まずは adonis-graphql-server の config/cors.js で origin: true にしてあげます。こうすることでCORSが有効になるとのこと。ってか、元からtrueになってましたよ、と。

  1 'use strict'
  2 
  3 module.exports = {
  4   /*
  5   |--------------------------------------------------------------------------
  6   | Origin
  7   |--------------------------------------------------------------------------
  8   |
  9   | Set a list of origins to be allowed. The value can be one of the following
 10   |
 11   | Boolean: true - Allow current request origin
 12   | Boolean: false - Disallow all
 13   | String - Comma seperated list of allowed origins
 14   | Array - An array of allowed origins
 15   | String: * - A wildcard to allow current request origin
 16   | Function - Receives the current origin and should return one of the above values.
 17   |
 18   */
 19   origin: true,

Vue.jsのアプリケーションを作る

👇こんな感じで基本全部デフォのままつくりました。後の方読んでたらnpmっぽかったし。(vue-routerにYしろって書いてあったけど、デフォルトがYになってた)

$ vue init webpack graphql-blog-app

? Project name graphql-blog-app
? Project description A Vue.js project
? Author shinodogg <xxx@xxx>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "graphql-blog-app".

必要なパッケージのインストール

graphql-blog-appディレクトリに行って👇ブワっとインストールします

$ npm install --save \
vue-apollo@next \ 👈 Vue.js用のApollo/GraphQLインテグレーションモジュール
graphql \ 👈 JS用GraphQLのリファレンス実装
apollo-client \ 👈 GraphQLクライアント
apollo-link \ 👈 GraphQLリクエストとか結果のフェッチとか
apollo-link-context \ 👈 操作をコンテキストにセット
apollo-link-http \ 👈 HTTPプロトコルでGraphQLの結果を取得
apollo-cache-inmemory \ 👈 Apolloクライアント用のキャッシュ実装
graphql-tag 👈 GraphQLクエリのパーサー

Vue Apolloのセットアップ

src/main.jsの既存のコードの下に👇を貼り付ける(Apollo周りのアレ)。これによってさっきインストールしたGraphQLサーバー(localhost:3333)とHTTPプロトコルを使ってやりくりできたりインメモリのキャッシュが使えたり。最後にVueApploプラグインをインストール。

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

const httpLink = new HttpLink({
    // URL to graphql server, you should use an absolute URL here
    uri: 'http://localhost:3333/graphql'
})

// create the apollo client
const apolloClient = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})

// install the vue plugin
Vue.use(VueApollo)

そのままmain.jsにapploProviderを作ってルートコンポーネントとして登録

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

new Vue({
    el: '#app',
    router,
    apolloProvider, 👈👈
    template: '<App/>',
    components: { App }
})

Bulma CSSを使う

index.htmlで👇のようにCDNで bulma.min.css を指定

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">

---

続きはまた明日以降に〜