react-native-firebase query with 'array-contains' in useEffect keeps refreshing component

Question

I'm just trying to make a request to fetch only the threads that contain the current user's id.

If I remove my 'where' query, I can fetch all threads.

There is my code :

useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      // query is empty
      .where('usersIds', 'array-contains', ['60ddd70c7a3a1e8e62d14dac'])
      .orderBy('latestMessage.createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const threadsQueried = querySnapshot
          ? querySnapshot.docs.map(documentSnapshot => {
              return {
                ...documentSnapshot.data(),
              };
            })
          : null;

        setThreads(threadsQueried);

        if (loading) {
          setLoading(false);
        }
      });

    return () => unsubscribe();
  });

I already tried without putting my id into an array, but the component keeps refreshing, like that:

.where('usersIds', 'array-contains', '60ddd70c7a3a1e8e62d14dac')

My firebase datas:

I already check here https://stackoverflow.com/a/59053018/9300663

and here https://stackoverflow.com/a/59215461/9300663

Edit: So it is working when id is without brackets ('60ddd70c7a3a1e8e62d14dac') into the query

But my component keeps refreshing.

If I add an empty array or an array with dependencies to my useEffect, the query does not works anymore.

Edit 2: Query is working but get called two times and the second time get back with 'null', which is emptying my state.

As written in the document the correct query is .where('usersIds', 'array-contains', '60ddd70c7a3a1e8e62d14dac') without the brakets. What error are you getting with this query? — Francesco Clementi, Jul 06 '21 at 15:17
What error is thrown in the console? What isn't working exactly? Is it the response from Firestore query or something with react ? — Dharmaraj, Jul 06 '21 at 15:18
Sorry my bad, it's working without brackets, but the component keeps refreshing — XplosiVe06, Jul 06 '21 at 15:23
It's not possible that the query stop to work if you put a dependency array in useEffect. However the correct implementation is to put an empty array in useEffect as a dependency, in this way the code inside useEffect will be executed just once when the component is mounted — Francesco Clementi, Jul 06 '21 at 15:32
Ok, so if I add or not an empty array, and console.log the querySnapshot, I get first the right querySnapshot, then 'null'. That's why my state get overwritten by 'null'. Like every time the query is launched 2 times. But without the 'where' query, I get only one response, not 2. — XplosiVe06, Jul 06 '21 at 15:42
Try to use forEach (https://rnfirebase.io/firestore/usage#querysnapshot), I worked a lot with firestore, but I have never seen docs.map. querySnapshot.forEach(documentSnapshot => { return { ...documentSnapshot.data(), }; }) and try to share your whole component if you want help — Francesco Clementi, Jul 07 '21 at 07:29

score 0 · Answer 1 · answered Jul 07 '21 at 11:39

So I found the solution when I tried another way to get my firebase query by using get() instead of onSnapshot():

firestore()
      .collection('THREADS')
      .where('usersIds', 'array-contains', user.id)
      .orderBy('latestMessage.createdAt', 'desc')
      .get()
      .then(querySnapshot => {
        const threadsQueried = querySnapshot.docs.map(documentSnapshot => {
          return {
            ...documentSnapshot.data(),
          };
        });
        setThreads(threadsQueried);

The problem with 'get()' was that the query only worked once and didn't update if new threads were created.

But it allowed me to have a firebase error asking me to create the indexes: 'usersIds' and 'latestMessage.createdAt'. After creating them, I was able to reuse my old code and everything's working correctly now.

useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      .where('usersIds', 'array-contains', user.id)
      .orderBy('latestMessage.createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const threadsQueried = querySnapshot.docs.map(documentSnapshot => {
          return {
            ...documentSnapshot.data(),
          };
        });
        setThreads(threadsQueried);
      });

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

react-native-firebase query with 'array-contains' in useEffect keeps refreshing component

1 Answers1