Go で Firebase のデータを読み取って React で表示する

Go で Firebase のデータを読み取って React で表示するところまで書いたが特に新しいことをしていないのでログに書く。

コードをいちいちブログに転記するのが面倒なのでパブリックリポジトリで開発することにした。

API側

https://gitlab.com/k1350/amicroblog/-/commit/9ef3445f23000c8c5d2e41234c7252d4900076dc

Firestore からデータ取得してから json で返却するように修正した。

type Page struct {
	Content []map[string]interface{} `json:"content"`
	HasNext bool                     `json:"has_next"`
	NextId  string                   `json:"next_id"`
}

こう書くだけで json のキー名とのマッピングをやってくれて便利。

フロント側

https://gitlab.com/k1350/amicroblog/-/commit/9f229d72845f5b01d4d65cae46b3ec9a723302ec

ルーティングを導入したため、以前の App.js の中身は List.js に移動している。

Firestore にはアクセスする必要がなくなったので削除し、データ取得部は

async function getItems() {
    let url = process.env.REACT_APP_API_BASE_URL;
    if (hasNext) {
        url += "?next=" + nextId;
    }
    fetch(url)
    .then(response => response.json())
    .then(data => {
        setItems(items.concat(data.content));
        setNextId(data.next_id);
        setHasNext(data.has_next);
    });
}

これだけになった。

次回、データ入力部分もフロントから API に送信するように修正していくためにルーティングを入れた。

データ入力はブログの管理者だけがする想定なのでおいおい認証も導入していく必要があるが、何を使って実装するかは考え中。
FirebaseUI を以前使ってみたときある程度楽ではあったのだが、今回はユーザーに自由にアカウントを作らせる必要が無いので、使わないほうがたぶん楽だと思う。
Firebase authentication のメール/パスワード認証を使って、ユーザーは Firebase のコンソールから手動で作る方法がいいのではないかと考えている。
API側の認証については、今回は特にユーザーを識別する必要が無いのでアクセストークンをヘッダに埋めて認証する感じでいいかなと思っている。