Nested onSnapshot problem

[beqramo]

I'm struggling to overcome problems that I have on nested onSnapshot, so, in short, I have 3 nested onSnapshot and when parent/root onSnapshot updates it also creates new onSnapshot listeners and leaves old ones too, so old and new ones are listening to the changes. I know that I should unsubscribe it but I can't, I'm losing track of which listeners are added or already exist.

One solution is to create array of unsubscribing functions in parent onSnapshot, but there another problem comes, I'm using docChanges with forEach and it is hard to manage which would I unsubscribe from array.

I saw this on Stackoverflow but it doesn't fit mine or even doesn't explain correctly exactly this case: nested listeners

What can you suggest to me? I don't know what else should I do.

Thanks in advance.

here is an example of my code that I'm trying to implement unsubscribe stuff( I use Mobx):

 // TODO: optimise this query
      const id = auth().currentUser?.uid;

      // get all channelId-s that user has
      channelParticipantsRef
        .where('user.id', '==', id)
        .onSnapshot((userChannels) => {
       

          userChannels?.docChanges().forEach(function (channelParticipant) {
            const channelParticipantData = channelParticipant;

            if (!channelParticipantData.doc.exists) return;

            // get all channels data that user has
            channelsRef
              .where(
                'channelId',
                '==',
                channelParticipantData.doc.data().channelId,
              )
              .onSnapshot((channels) => {
                if (!channels || channels.empty) return;

                channels.docChanges().forEach(function (channel) {
                  const channelDataObject = channel.doc.data();

                  console.logBeauty(channel.type, 'channelDataObject ');

                  if (channel.type === 'added' || channel.type === 'modified') {
                    const channelData: ChannelTransformedDataType = {
                      ...channelDataObject,
                      language: channelParticipantData.doc.data().language,
                      channelParticipantId: channelParticipantData.doc.id,
                      lastMessageDate: {
                        ...channelDataObject.lastMessageDate,
                      },
                      otherUsers: [],
                    };

                    // get all channels users
                    channelParticipantsRef
                      .where('user.id', '!=', id)
                      .where('channelId', '==', channelDataObject.channelId)
                      .onSnapshot((channelParticipants) => {
                        const participants: UserModelType[] = [];

                        if (channelParticipants.empty)
                          return self.removeChannel(
                            channelDataObject.channelId,
                          );

                        channelParticipants.docs.forEach(
                          (channelParticipant) => {
                            participants.push(channelParticipant.data().user);
                          },
                        );

                        channelData.otherUsers = participants;

                        console.log(channelData, 'channelDatachannelData');

                        if (channel.type === 'added')
                          self.pushChannel(channelData);
                        else self.editChannel(channelData);
                      });
                  } else if (channel.type === 'removed') {
                    self.removeChannel(channelDataObject.channelId);
                  }
                });
              });
          });
        });

[andersonaddo]

I would suggest flattening this out with async/await

[beqramo]

yes, but with flattening I will not be able to get updates on change.
I think I will create an object where I save unsubscribe function where keys will be id-s and if there will be an update and update will be on id which is saved in my object I will call the unsubscribe function and remove the old listener.

I can't come up with other solutions.

[bartkoedijk]

Well you use the onSnapshot method on a Reference where you use a where method with a provided Id, so it will be nested.
If you would like to reduce the line of codes, you can use the React Firebase Hooks package.
If you are using React Native with @react-native-firebase/app, I am currently building a package for that as well: React Native Firebase Hooks

Hope it helps =)