前提・実現したいこと・コード

FirestoreとNext.jsでSNSを開発しており、通知一覧コンポーネントを描画した際、通知を既読状態にしたいと考えています。

通知はFirestoreで下記のように、オブジェクトの配列として格納しています。

Firestore
1users
2  - uid
3    - name: "foo"
4    - notifications:
5        0: {
6          name: "bar" // 通知を送ってきたユーザーの名前
7          isRead: false // 未読の場合false
8        }
9        1: {
10          name: "baz"
11          isRead: false
12        }

通知一覧コンポーネントを描画した際に、上記のnotificationsフィールドに格納されているすべてのオブジェクトの内、isReadがfalseのオブジェクトのisReadをtrueにしたいです。

通知一覧コンポーネントは下記のようになっています。

javascript
1// ↓ 通知一覧コンポーネント
2const Notifs = ({ user, setOpenNotifs }) => {
3  const notifs = user.notifications.map((notif, index) => {
4    return <li key={index}>{notif.name}から通知が来ました。</li>
5  })
6
7  return (
8    <ul>
9      {notifs}
10      <li>
11        <button onClick={()=> setOpenNotifs(false)}>閉じる</button>      
12      </li>
13    </ul>
14  )
15}
16
17// 通知一覧コンポーネントを開くコンポーネント
18const Header = ({ user }) => {
19  const [notifLength, setNotifLength] = useState(0)
20  const [openNotifs, setOpenNotifs] = useState(false)
21  useEffect(() => {
22    if (!user || user.notifications.length < 1) return
23    const notifs = user.notifications.filter((notif) => !notif.isRead) // 未読を取得
24    setNotifLength(notifs.length)
25  }, [])
26
27  return (
28    <hedaer>
29      <img src="logo" />
30      <button onClick={()=> setOpenNotifs(true)}>
31        通知
32        <span>未読の数: {notifLength > 0 && notifLength}</span>
33      </button>
34      {openNofis && <Notifs user={user} setOpenNotifs={setOpenNotifs} />}
35    </header>
36  )
37}

試したこと

通知一覧コンポーネントNotifsで下記を実行しました。

javascript
1useEffect(() => {
2  firebase.firestore().collection("users").doc(user.uid).get().then((doc) => {
3    const notifs = doc.data().notifications;
4    notifs.forEach((notif) => {
5       if(notif.isRead) return
6       console.log(notif.isRead)
7       db.collection("users").doc(user.uid).update({ isRead: true })
8    })    
9  })
10}, [])

結果、isReadがtrueになりませんでした。
そのため、未読数の表示も変化が無い状態です。
Notifsを描画するたびに、コンソールにはfalseが表示されます。

コンソールにisReadが表示されるため条件分岐のミスではなく、Firestoreのupdateメソッドが上手く実行できていないことが原因かと思いますが、私では原因が分かりません。

また、上記のisReadをtrueにする方法は非同期処理のため、例えば通知一覧コンポーネントを開いてただちに閉じた場合は処理が途中で終わり、DBのデータと実態に不整合が発生する可能性が考えられます。

Next.jsのAPIルートかCloud functionsを使ってバックエンドでisReadを書き換えることができれば、処理が途中で終わる可能性は排除できそうですが、クライアント側の処理で問題無い方法があればご教示いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

問題点整理

質問文のコードを解釈する限り、notificationsはusers/UIDのドキュメント内のフィールドとして扱っています。
（通知を表示する際にも、項目へのアクセスにuser.notificationsを使っているため）

それに対して更新処理を見ると、
db.collection("users").doc(user.uid).update({ isRead: true })
としています。
これだと、users/UIDというドキュメント内のisReadというフィールドを更新しているように見えます。

※本来やろうとしていること

js
1const before = {
2  notifications: [
3    {
4      name: "bar",
5      isRead: false,
6    },    
7  ],
8}
9const after = {
10  notifications: [
11    {
12      name: "bar",
13      isRead: true, // notificationsフィールドの各要素内のisReadを更新
14    },    
15  ],
16}

※実際に起きていると思われること

js
1const before = {
2  notifications: [
3    {
4      name: "bar",
5      isRead: false,
6    },    
7  ],
8}
9const after = {
10  notifications: [
11    {
12      name: "bar",
13      isRead: false,
14    },    
15  ],
16  isRead: true,  // ドキュメント直下のisReadを更新(?)
17}

解決例

例えば、「notificationsを通知状態をtrueにした上で更新する」アプローチだと、
こんな感じの実装を一例として挙げられます。
※手元での確認まではしてないですが、その場合は考え方の参考としてもらえれば

javascript
1useEffect(() => {
2  firebase.firestore().collection("users").doc(user.uid).get().then((doc) => {
3    const notifs = doc.data().notifications;
4    // 更新済み状態のnotificationsを生成
5    notif_read = notifs.map(notif => {
6      return {
7        ...notif,
8        isRead: true,  
9      };
10    });
11    // 更新済み状態のnotificationsで更新
12    db.collection("users").doc(user.uid).update({ notifications: notif_read });
13  })
14}, [])