Firebaseで作るWebアプリケーション - データベースからデータを取得する

9695 ワード
チュートリアル Firebase JavaScript JavaScript テキストリンク

今回やること

前回保存したデータを取得し、画面に表示するようにします。

データベースからデータを取得するAPIを作成する

functions/index.tsに下記を追加します。

export const listArticle = functions.https.onCall(async (data, context) => {
  const dd = await admin.firestore().collection('articles').get();
  return dd.docs.map((doc) => doc.data());
});

listArticleという名前のAPIを追加し、collection('articles')をgetしています。

このように記述すると、指定のコレクションの中のデータを全て取得することができます。

取得したデータはDocumentDataという形式になり、プロパティdocsに配列としてそれぞれのデータが取得されます。

それぞれのデータはまたdata()というメソッドを持ち、これを呼び出すことでデータ本体を取得することができます。

そして取得したデータをAPIの戻り値にしています。

クライアントからAPIを呼び出して取得したデータを表示する

public/index.htmlを以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cmnty2020</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/7.15.0/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/7.15.0/firebase-auth.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-database.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-messaging.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-storage.js"></script>
    <script defer src="/__/firebase/7.15.0/firebase-functions.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
  </head>

  <body style="background-color: #eee">
    <div id="app">
      <div v-for="article in articles">
        {{ article.body }}
      </div>
       <button v-on:click="createArticle">データ追加</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        new Vue({
          el: "#app",
          data: {
            articles: []
          },
          async mounted(){
            let res = await firebase.functions().httpsCallable('listArticle')();
            this.articles = res.data;
          },
          methods: {
            createArticle: async function () {
              await firebase.functions().httpsCallable('createArticle')();
            }
          },
        });
      });
    </script>
  </body>
</html>

ページ表示時に

let res = await firebase.functions().httpsCallable('listArticle')();
this.articles = res.data;

でAPIを呼び出し、取得したデータを表示させています。

データ追加ボタンを押してから画面をリロードすると、表示されるデータが増えています。

続く...