React-redux-firebase: useFirestoreConnect clear 'storeAs' state after UNSET_LISTENER

[rusakovic]

Hello
Thank you for your plugin.
It's not mentioned into the doc. But, is it possible to reset useFirestoreConnect each time, when UNSET_LISTENER is triggered?

If not, is it possible to add this feature?
Thank you.

[prescottprue]

@rusakovic It is not currently supported. It is usually suggested to use a unique key for your query using storeAs - in the case of fetched messages you can make the key contain the user name:

storeAs: `fetchedMessages-${auth.uid}`

Make sure you also grab the data from this new section of state with the same key!

[rusakovic]

@prescottprue
Thank you very much for this tip. Maybe it will be helpful for others.

  const fetchedMessagesUID = `fetchedMessages-${chatID}`
  useFirestoreConnect([
    {
      collection: 'chatMessages',
      doc: chatID,
      subcollections: [{ collection: 'messages', orderBy: ['sendAt', 'desc'] }],
      storeAs: fetchedMessagesUID
    }
  ])

 const messagesArray = useSelector(
    state => state.firestore.ordered[fetchedMessagesUID]
  )

[alekseykarpenko]

@prescottprue How do you feel about storing list of documents and the each document separately? Maybe you have some recipe about how to get separate document from the list if it was previously fetched, but still without fetching the whole list of the docs when you need only one of them?

[prescottprue]

@alekseykarpenko That is actually the idea for v1 of redux-firestore:

• results are stored under a key representing the query instead of just the collection/subcollection path
• all subcollections are stored at the top level of redux (instead of nested within a parent collection)
• only ids will be stored in the ordered list and then data by key will be grabbed from

This is all described in the v1 roadmap

[elron]

If you're using react hooks, and you want to fetch /user/some-user-ID/chats/some-chat-ID inside Chat() component, here's an example:

import React from 'react'

import { useSelector } from 'react-redux'
import { useFirestoreConnect } from "react-redux-firebase";

export default function Chat(props) {
    const auth = useSelector(state => state.firebase.auth);

    const chatId = props.chatId; // for example: 4eSCLqAy60RNytuFxji4

    // This will force to wait for user authentication before fetching the chat id
    useFirestoreConnect(() => {
        if (!auth?.uid) return [];
        return [{ collection: 'users', doc: auth.uid, subcollections: [{ collection: `chats`, doc: chatId }], storeAs: `user-chat-${chatId}` }];
    });

    const chatData = useSelector(
        ({ firestore: { data } }) => data[`user-chat-${chatId}`]
    )

    return (
        <div>
            <code>{JSON.stringify(chatData)}</code>
        </div>
    )
}