使用云firestore分页进行React-native-gifted-chat

Question

我正在使用Firestore来存储消息。为了优化移动应用程序的性能，我想在firestore查询中设置一个限制(50)。它运行良好，并实现了道具中提供的onLoadEarlier React-native-gifted-chat。

一切都运行正常。

但是，当我在聊天中发送一条新消息时，在向上滚动查看之前的消息后，只有50条带有新消息的最后一条消息可用。

因此，每次我在Firestore数据库中添加一条消息时，就会执行onSnapshot (在useeffect中)并应用limit查询。

有没有办法避免这种情况？

谢谢。

这是我的useEffect：

useEffect(() => {
    const messagesListener = firestore()
    .collection('groups')
    .doc(group._id)
    .collection('messages')
    .orderBy('createdAt', 'desc')
    .limit(50)
    .onSnapshot(querySnapshot => {
        const newMessages = querySnapshot.docs.map(doc => {
            const firebaseData = doc.data();

            const data = {
                _id: doc.id,
                text: '',
                createdAt: new Date().getTime(),
                ...firebaseData
            };

            return data;
        });

        setMessages(previousMessages => {
            return GiftedChat.append(previousMessages, newMessages);
        });
    });

    return () => messagesListener();
}, []);

Answer 1

我在react-native中使用FlatList来呈现聊天，并且我必须对聊天列表进行分页。由于Firestore查询游标在实时监听程序中不受支持，因此我创建了两个列表recentChats & oldChats。

我使用实时侦听器query.onSnapshot填充recentChats，并使用游标startAfter填充oldChats。FlatList数据是两个列表的组合，我负责合并逻辑。

const MESSAGE_LIMIT = 15;

const ChatWindow = props => {
  const { sessionId, postMessage, onSendTemplateButtonPress } = props;

  // Firestore cursor is not supported in query.onSnapshot so maintaining two chat list
  // oldChats -> chat list via cursor, recentChats -> chat list via live listener
  const [oldChats, setOldChats] = useState([]);
  const [recentChats, setRecentChats] = useState([]);

  // if true, show a loader at the top of chat list
  const [moreChatsAvailable, setMoreChatsAvailable] = useState(true);

  const [inputMessage, setInputMessage] = useState('');

  useEffect(() => {
    const query = getGuestChatMessagesQuery(sessionId)
      .limit(MESSAGE_LIMIT);
    const listener = query.onSnapshot(querySnapshot => {
      let chats = [];
      querySnapshot.forEach(snapshot => {
        chats.push(snapshot.data());
      });
      // merge recentChats & chats
      if (recentChats.length > 0) {
        const newRecentChats = [];
        for (let i = 0; i < chats.length; i++) {
          if (chats[i].sessionId === recentChats[0].sessionId) {
            break;
          }
          newRecentChats.push(chats[i]);
        }
        setRecentChats([...newRecentChats, ...recentChats]);
      } else {
        setRecentChats(chats);
        if (chats.length < MESSAGE_LIMIT) {
          setMoreChatsAvailable(false);
        }
      }
    });

    return () => {
      // unsubscribe listener
      listener();
    };
  }, []);

  const onMessageInputChange = text => {
    setInputMessage(text);
  };

  const onMessageSubmit = () => {
    postMessage(inputMessage);
    setInputMessage('');
  };

  const renderFlatListItem = ({ item }) => {
    return (<ChatBubble chat={item} />);
  };

  const onChatListEndReached = () => {
    if (!moreChatsAvailable) {
      return;
    }
    let startAfterTime;
    if (oldChats.length > 0) {
      startAfterTime = oldChats[oldChats.length - 1].time;
    } else if (recentChats.length > 0) {
      startAfterTime = recentChats[recentChats.length - 1].time;
    } else {
      setMoreChatsAvailable(false);
      return;
    }
    // query data using cursor
    getGuestChatMessagesQuery(sessionId)
      .startAfter(startAfterTime)
      .limit(MESSAGE_LIMIT)
      .get()
      .then(querySnapshot => {
        let chats = [];
        querySnapshot.forEach(snapshot => {
          chats.push(snapshot.data());
        });
        if (chats.length === 0) {
          setMoreChatsAvailable(false);
        } else {
          setOldChats([...oldChats, ...chats]);
        }
      });
  };

  return (
    <View style={[GenericStyles.fill, GenericStyles.p16]}>
      <FlatList
        inverted
        data={[...recentChats, ...oldChats]}
        renderItem={renderFlatListItem}
        keyExtractor={item => item.messageId}
        onEndReached={onChatListEndReached}
        onEndReachedThreshold={0.2}
        ListFooterComponent={moreChatsAvailable ? <ActivityIndicator /> : null}
      />
      {
        Singleton.isStaff ?
          null:
          <ChatInput
            onMessageInputChange={onMessageInputChange}
            onMessageSubmit={onMessageSubmit}
            inputMessage={inputMessage}
            style={GenericStyles.selfEnd}
            onSendTemplateButtonPress={onSendTemplateButtonPress}
          />
      }
    </View>
  );
};

Answer 2

您的查询第一次是OK的，对于后续查询，您必须使用::startAt或::startAfter方法。

您可以在官方文档中找到更多信息。https://firebase.google.com/docs/firestore/query-data/query-cursors