Get array of documents from array of ids in firestore using React

Question

I need to get back an array of documents using an array of user Ids from firestore in react. I want to call this as a function and pass in an array of ids into it, then return an array of objects with all the documents that have matching userIds.

The userIds array will look something like this

["2","3","4"]

The object I need returned in an array, and how it is structured as a collection in the database will look like this:

 {
    dateCreated: 1630348731918,
    docId: "ljAIJmthfwSLwU4FPdMW",
    emailAddress: "[email protected]",
    followers: ["2","3"],
    following: ["2"],
    fullName: "Bobby R.",
    userId: "3",
    username: "bobby"
  }

Below is the code I currently have.

export const getFollowers = async (followerIds) => {
  if (followerIds.length > 0) {
    const result = await firebase
      .firestore()
      .collection("users")
      .where("userId", "in", followerIds)
      .get();

    const followers = result.docs.map((item) => ({
      ...item.data(),
      docId: item.id,
    }));
    return followers;
  }
};

I'm calling this inside useEffect, which looks like this in the full page:

export default function FollowerPopUp({ visible, closeWindow, followers }) {


  useEffect(() => {
    const response = getFollowers(followers);
    console.log(response);
  }, [followers]);

  return (
    <div
      className={`overflow-auto z-30 m-0 p-0 h-2/6 w-3/12  border rounded-xl bg-white text-left fixed ${visible}`}
    >
      <div className="flex border-b border-gray-primary w-full h-8 mt-2 px-5 ">
        <p className="mx-auto font-bold pl-6">Followers</p>
        <img
          src="/images/cancel.png"
          className="cursor-pointer h-5 mt-0.5"
          onClick={closeWindow}
        />
      </div>

      <FollowerRow
        following={true}
        username={"kratos"}
        fullName={"Kratos God of War"}
      />
    </div>
  );
}

And I'm actually now getting back a promise with the Promise Result and the array of objects I need. Now I just need to get that array into a variable to map through.

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(2)
0: {username: "kratos", following: Array(0), userId: "2", fullName: "Kratos the God of War", followers: Array(1), …}
1: {dateCreated: 1630347676459, userId: "3", following: Array(1), emailAddress: "[email protected]", username: "cloud", …}
length: 2

"It doesn't work" is not much information to work with. We can't see the value of followerIds, nor the value returned, nor can we see the contents of your dataabase Please edit the question to provide your debugging details and your minimal complete example that anyone can use the reproduce the issue. — Doug Stevenson
– Doug Stevenson, Commented Sep 2, 2021 at 18:31
I've updated my question. I'm not sure how to properly write out how my database is set up. I have a collection of users, then a list of documents under those users, and then each document is formatted like the object example provided above. Sorry, I'm fairly new at this. I'm just unsure how to retrieve an array of those documents as objects with an array of the user Ids that I'll pass in. Thanks! — rreay724
– rreay724, Commented Sep 2, 2021 at 19:05
"Just a rejected promise" - show us the contents of that promise. There is an error message in it, right? This is a critical part of the debugging information that should be in the question. — Doug Stevenson
– Doug Stevenson, Commented Sep 2, 2021 at 20:12
Updated with more information. I'm actually getting data back in the promise. I know I have this written wrong and it actually errors and says invalid query. a non empty array is required for "in" filters, as well. Sorry for the lack of information. I'm fairly new at asking questions here. — rreay724
– rreay724, Commented Sep 2, 2021 at 20:47
I've updated the code again. I was actually able to pull a fulfilled promise with the array of objects, but I'm unsure how to get the PromiseResult out into an array of objects to map through. — rreay724
– rreay724, Commented Sep 2, 2021 at 20:56

rreay724 · Accepted Answer · 2021-09-03 18:04:21Z

2

Fixed this on my own. My code looks like this and it now works and I'm able to pull back what I need.

Function to pull data from firestore:

export async function getFollowers(followerIds) {
  if (followerIds.length > 0) {
    const result = await firebase
      .firestore()
      .collection("users")
      .where("userId", "in", followerIds)
      .get();

    const followers = await Promise.all(
      await result.docs.map(async (item) => ({
        ...item.data(),
        docId: item.id,
      }))
    );
    return followers;
  }
}

Code in useEffect to return array of followers:

 useEffect(() => {
    const getFollowerList = async () => {
      const followerList = await getFollowers(followers);
      await setFollowersList(followerList);
    };
    getFollowerList();
  }, [followers]);

edited Sep 3, 2021 at 18:04

answered Sep 3, 2021 at 14:29

rreay724

1831 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get array of documents from array of ids in firestore using React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related