Firebase Pros Cons and CRUD usage

メリット

hostingとdbを一括でできる

Netlifyと違ってRouteのblockがない。

デメリット

先にHostingをすると何故か後からfirestoreが追加できなくなる。

公式ドキュメントでCare your eyesが使えない

Project Limit

project作成数の上限が無料では12個。

https://qiita.com/amazon_106/items/080831ac3838ba8197ea

この記事によると

https://console.cloud.google.com/cloud-resource-manager?hl=ja

このLINKでDelete Pendingの物を削除すれば上限解放されるのかもしれない？

というかfirestore なのになぜかGCPとlinkされてしまっている

qiita.com

どうやら30days 経てば完全削除されるらしい

code

GUI

firebase consoleからgoogle loginしてterminalでloginするだけなので省略

config

firebase consoleのページからcopyしてきたconfigを使用しないと

firebaseのtableを読み書きすることはできない

Reactだとsrc/Config/config.jsに

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  apiKey: "",
  authDomain: "",
.........
};

export const firestore = firebase.initializeApp(config);

こうやって書いてconfigにinitを噛ませたものを

これでconfig.jsからfirestoreとしてexportして

App.jsなどでimportしてpromiseで使用する

Twitterで @CreatorQsFさんが

firebaseつかうとき、めんどうなので import * as firebase from 'firebase/app' firebase.initializeApp(config) export { firebase } っていうのをやるんだけど良いのか悪いのかいまだによくわかってない

って言ってるのを目にして，前述のより短くて良さそうなので試してみる

config.jsの2行

import firebase from 'firebase/app'; import 'firebase/firestore';

を

import * as firebase from 'firebase/app'

にして

export const firestore = firebase.initializeApp(config);

を

firebase.initializeApp(config); export {firebase};

に変更して

import {firebase} from '../Config/config'; import 'firebase/firestore'

して

const ref = firebase.firestore().collection('writings');

していった．シンプルになった！

Show(READ)

hooksのuseCollectionDataを使うのが一番楽だった．

.........
import firebase from 'firebase/app';
import {firestore} from '../Config/config';
import {useCollectionData} from 'react-firebase-hooks/firestore';

const ref = firebase.firestore().collection('writings');

これで必要なfirebase, config, useCollectionData, DB-Table,

を取得しておいて

const Show = () => {
  const [values, loading, error,] = useCollectionData(
    ref, {idField: 'id'});
  ....

これでvalueにidと, content, created_atなどが入る

  return (
        {values.map(value => (
            <div key = {value.id}>
                  {value.content}
            <div>
  ))}
);
export default Show;

これでvaluesの配列から中身がhtmlにかける．