This page is intended for users in Japan(English). Go to the page for users in United States.

【note更新】「Laravel + Vue.jsではじめる 実践 GraphQL入門」の全貌を大公開します!〜GraphQL + VueでSPAフロントエンドを開発!(アカウント作成ページ/機能の実装)編〜

こんにちは!FISM採用広報担当です!

今週も始まりました。
企画開発メンバーによる特別連載「Engineering of FISM」の時間です。


▼毎週木曜日に更新中です🎉



企画開発メンバーで執筆しましたLaravel + Vue.jsではじめる 実践 GraphQL入門の全貌を、毎週 CTO大橋note にて大公開しております。


▼マガジンで連載中です📚


今回は、「GraphQL + VueでSPAフロントエンドを開発!(アカウント作成ページ/機能の実装)編〜」です。

気になる中身を少しだけお見せします!
どうぞ、ご覧ください!!

ApolloClientの設定をする

開発の土台が整いましたら、Apollo-clientの設定をしていきます。
プロジェクトファイル内のmain.jsに記載していきます。

Apolloの仕様

Apollo-clientはreact-reduxを触っている人には、わかりやすいと思いますが 大元のProviderを作成し、親コンポーネントに読み込ませ、すべての子コンポーネントは親を参照できる仕組みです。



Vueの初期化タイミングでvue-apolloライブラリ経由で、Apollo-clientを読み込ませ、子コンポーネントで、通信処理を実装できるようになります。


Apolloプロバイダの設定をしていきます

main.jsを開きます。twitter-like-client/src/main.js


まずmain.js上部にライブラリ群をインポートします

• twitter-like-client/src/main.js

// apollo本体
import { ApolloClient } from "apollo-client";
// ApolloClientへのオプション
import { setContext } from "apollo-link-context";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
// vueとの紐付け
import VueApollo from "vue-apollo";


main.jsの中部にapollo-clientとオプションの紐付けをしていきます。

コメントアウトにスクリプトに対する説明をしています。

// vueでvue-apolloを使用する事の紐付け
Vue.use(VueApollo);
// createHttpLinkでエンドポイントの指定をします
const httpLink = createHttpLink({
uri: "http://localhost:8000/graphql"
});
// ログイン後にBearerを指定したJWT通信が入るので先に記述します
// 今回はlocalstorageを用いてtokenを保持します
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem("vue_token");
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
}
}
});
// Apolloclientの初期化です
// linkとmemoryCacheを有効にします
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
// apolloProviderを設定します。
// あとでstoreにエラーを通知しようと思うのでstoreへのコミットを記述します
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
errorHandler(error) {
store.commit("error");
}
});

// 最後にVueの初期化の際にapolloproviderを設定します
new Vue({
router,
store,
apolloProvider,
render: h => h(App)
}).$mount('#app')


記載内容の全て

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

// apollo本体
import { ApolloClient } from "apollo-client";
// ApolloClientへのオプション
import { setContext } from "apollo-link-context";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
// vueとの紐付け
import VueApollo from "vue-apollo";

Vue.config.productionTip = false

// vueでvue-apolloを使用する事の紐付け
Vue.use(VueApollo);
// createHttpLinkでエンドポイントの指定をします

const httpLink = createHttpLink({
uri: "http://localhost:8000/graphql"
});
// ログイン後にBearerを指定したJWT通信が入るので先に記述します
// 今回はlocalstorageを用いてtokenを保持します
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem("vue_token");
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
}
}
});
// Apolloclientの初期化です
// linkとmemoryCacheを有効にします
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
// apolloProviderを設定します。
// あとでstoreにエラーを通知しようと思うのでstoreへのコミットを記述します
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
errorHandler(error) {
store.commit("error");
}
});

// 最後にVueの初期化の際にapolloproviderを設定します
new Vue({
router,
store,
apolloProvider,
render: h => h(App)
}).$mount('#app')


Apolloを利用する準備が整いました

ここからサーバーサイドで実装したAPIを使い、アプリケーション作成に入ります。

▼参照:サーバーサイド編について



Apolloを利用する準備が整ったところで、続きはnoteにてご覧ください。


続きはこちらからどうぞ🎉

「Laravel + Vue.jsではじめる 実践 GraphQL入門」の全貌を大公開します!〜GraphQL + VueでSPAフロントエンドを開発!(アカウント作成ページ/機能の実装)編〜|kzkohashi|note
こんにちは。 kzkohashi です。FISM という会社でCTOをやっております。 今年4月に「Laravel + Vue.jsではじめる 実践 GraphQL入門」という技術書籍を出版しました。 前回からは、GraphQL + Vue でのSPAフロントエンド開発をお送りしております。 ▼ 前回の記事はこちらをご覧ください💁🏿‍♂️ 今回は、どうぞご覧ください! 開発の土台が整いましたので、Apollo-clientの設定をしていきます。プロジェクトファイル内のmain.jsに記載していきま
https://note.mu/kzkohashi/n/nd36890c9e292



来週も、木曜日に更新してまいります!乞うご期待ください!

現在FISMでは、絶賛開発メンバーを募集しています。
GraphQL × Laravel + Vue.js + Swift で開発できるのはFISMだけ!
エントリーお待ちしています!

まずはカジュアルにお話ししましょう!

FISM株式会社's job postings
15 Likes
15 Likes

Weekly ranking

Show other rankings