vueのインストール
vue init webpack my-project
何個か質問されるので、回答しながら進んでください。
インストール終わったら、
パッケージをインストールして、起動！
cd my-project
npm install
npm run dev
vue-apolloのインストール
vueからgraphqlを叩きやすくしてくれるモノです。
github.com
下記パッケージをインストールします。
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
main.jsに設定を追加
こんな感じです。
import Vue from 'vue'
import App from './App'
import router from './router'
import {ApolloClient} from 'apollo-client'
import VueApollo from 'vue-apollo'
import { HttpLink } from 'apollo-link-http'
import {ApolloLink, concat} from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'
Vue.config.productionTip = false
Vue.use(VueApollo)
const AccessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
const authMiddleware = new ApolloLink((operation, forward) => {
operation.setContext({
headers: {
Authorization: `bearer ${AccessToken}`,
Accept: 'application/vnd.github.v4.idl'
}
})
return forward(operation)
})
const httpLink = new HttpLink({
uri: 'https://api.github.com/graphql'
})
const apolloClient = new ApolloClient({
link: concat(authMiddleware, httpLink),
cache: new InMemoryCache()
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$loadingKey: 'loading'
}
})
new Vue({
el: '#app',
provide: apolloProvider.provide(),
router,
components: { App },
template: '<App/>'
})
headers の Authorizationに githubのAccessTokenを渡してあげています。
githubのAccessTokenは下記リンクよりの取得して自分のtokenに修正してください。
https://github.com/settings/tokens
compornetの書き方
適当に graphql.vueなどでお試しください。
<template>
<p>
{{viewer.login}}
</p>
</template>
<script>
import gql from 'graphql-tag'
const ViewerQuery = gql`
query {
viewer {
login
}
}
`
export default {
name: 'index',
data () {
return {
viewer: ''
}
},
apollo: {
viewer: {
query: ViewerQuery,
// update (data) {
// return data.viewer
// }
}
}
}
</script>
<style scoped>
</style>
{{viewer.login}} に自分のgithubのアカウント名が表示されれば成功です。
下記はポイントや注意です
import gql from 'graphql-tag'
graphql-tagをインポートします。
graphqlのクエリーを書きやすくしてくれるもの
const ViewerQuery
const ViewerQuery に graphql-tagを使って、クエリーを書いています。
ハマったのが、
gql`
の
`
ングルクォーテーション【 ' 】 じゃなくて バッククォーテーション【 ' 】です。
ご注意を！！
受け取り用の変数とapolloからの呼び出しを定義
dataにviewerを定義しています。
data () {
return {
viewer: ''
}
},
apollo: {
viewer: { // <= セットする変数名
query: ViewerQuery, // <= 呼び出すクエリー
}
}
}
今回、graphqlのクエリの戻りが、下記のようになります。
{
"data": {
"viewer": {
"login": "xxxxxxx"
}
}
}
※ 変数名とレスポンスでdata配下の名前をviewerで統一しておくと、暗黙的にセットしてくれます。
ここもハマりポイントで、
下記のように レスポンスの名前と変数名が異なると値がセットされません。
data () {
return {
hello: ''
}
}
apollo: {
hello: {
query: ViewerQuery
}
}
}
↑ ダメな書き方です
しかし
変数名とレスポンスの名前が違う時 や レスポンスの部分的に値をセットしたい時などは、
update (data) を使って特定の値をセットすることもできます。
data () {
return {
hello: ''
}
}
apollo: {
hello: {
query: ViewerQuery,
update (data) {
return data.viewer
}
}
}
}
data () {
return {
viewer: '',
login: ''
}
}
apollo: {
login: {
query: ViewerQuery,
update (data) {
return data.viewer.login
}
}
}
}
参考サイト
ありがとうございます
GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS
GitHub - apollographql/graphql-tag: A JavaScript template literal tag that parses GraphQL queries
Introduction to GraphQL | GitHub Developer Guide
GraphQL API Explorer | GitHub Developer Guide
新卒エンジニアがVue+GraphQL+ServerlessでTodoアプリ作ってみた
express-graphql + vue-apollo で GraphQLを試してみた | PLAID engineer blog
関連記事
marketing-web.hatenablog.com
marketing-web.hatenablog.com
