GAE+NuxtのSSRでFirestoreを使う

#vue #nuxt #gae #firebase

App Engineの標準環境でNuxtを使って無料SSR を先日やってみたので、今度はFirebaseのCloud Firestoreでデータの保存を試してみました。

ちなみにGAEのスタンダード環境ではNode8が動くため、ローカルでも全てNode8で動かす必要があります。

Firebaseの初期設定

plugins/firebase.jsに下記のように設定を保存します。

import * as firebase from "firebase";
require("firebase/firestore");

if (!firebase.apps.length) {
  const config = {
    apiKey: "your firebase api key",
    authDomain: "your firebase auth domain",
    databaseURL: "your firebase database url",
    projectId: "your google cloud platform project id",
    storageBucket: "your google cloud platform storage bucket",
    messagingSenderId: "your firebase messaging sender id"
  };
  firebase.initializeApp(config);
}

firebase.firestore(); // もしかしたら要らないかも

そしてnuxt.config.jsで上記を読み込むようにしておきます。

  plugins: ["~/plugins/firebase.js"],

これでFirebaseのライブラリがNuxt上で利用できるようになります。

Firestoreへのデータ追加＆取得

元々あるindex.vueを下記のように修正し、データの一覧を追加してボタンを押すとデータを登録できるようにした最小のサンプルを作ってみました。（関係ないところは削っています）

テンプレート

テンプレートは単にデータを表示しているだけで特筆するところは無いです。

<template>
  <section class="container">
    <div>
      <div v-for="text in texts" :key="text.id">
        {{ text.body }}
      </div>
      <input type="text" v-model="textInput">
      <button type="button" @click="add">add</button>
    </div>
  </section>
</template>

スクリプト

初期化

import db from "../lib/db";

DBを簡単に使える様にインポートしてすぐ使えるようにしています。これは別に必ず作らなければならないわけではありません。中身は単にdbを初期化して取ってきているだけです。

import * as firebase from "firebase";
export default firebase.firestore();

データをFirestoreから取得してくる

ページを読み込むと、まずFirestoreからデータを取ってきて一覧します。

async function getTexts() {
  return new Promise(callback => {
    let texts = [];
    db
      .collection("texts")
      .get()
      .then(query => {
        query.forEach(doc => {
          texts.push(doc.data());
        });
        callback(texts);
      });
  });
}

export default {
  data() {
    return {
      texts: [],
      textInput: ""
    };
  },
  async asyncData({ params }) {
    return { texts: await getTexts() };
  }
}

データの初期化にmountedを使うことは多いと思いますが、これはサーバーサイドレンダリングでは動作しないため、代わりにasyncDataやfetchを使う必要があります。asyncDataは下記URLに使い方が載っていますが、async/awaitを使ったり、Promiseやcallback形式など自由に選べるようです。

非同期なデータ - Nuxt.js

あとこの中ではthisが使えないため、仕方なく適当にクラスの外にfunctionを定義してそれを呼び出しています。

あ、あとasyncDataはコンポーネントでは使えないため、今回はページ上で実行しています。実際の開発の際もコンポーネントで値を使いたい場合はプロパティで渡すか、storeを使うかになると思います。

データをFirestoreに追加する

あとは追加ボタンをクリックした時の処理を追加します。

  methods: {
    add() {
      db
        .collection("texts")
        .add({
          body: this.textInput
        })
        .then(docRef => {
          this.textInput = "";
          return getTexts();
        })
        .then(texts => (this.texts = texts));
    }
  }