How to fetch all the documents with unique id from firestore database using React?

user_13906491 0
Viewed 68

[Firestore SS][1] [1]: https://i.stack.imgur.com/EI1Dm.png

I want to fetch each document as displayed in SS it's stored as Pets + unique_userId. I am unable to fetch all data together. Just able to fetch one data of a particular user using the code below.

const [info,setInfo]=useState([]);
  useEffect(() => {
    db.collection("pets ESYXOPqlJpZ48np8LfNivnh9pvc2").onSnapshot((snapshot) =>
       setInfo(snapshot.docs.map((doc) => doc.data()))
      );    
    },[]);

Here ESYXOPqlJpZ48np8LfNivnh9pvc2 this is the userID of each unique user

Please help me out to fetch all the Pets data instead of hardcoding and fetching one particular data.

google-cloud-firestore firebase reactjs javascript
2 Answers

Try the following code,

const [docs, setDocs] = useState([]);

  useEffect(() => {
      const querySnapshot = await getDocs(collection(db,"pets ESYXOPqlJpZ48np8LfNivnh9pvc2"));

      const document =[];
      querySnapshot.forEach((doc) => {
        document.push({
          ...doc.data(),
          id: doc.id
        });
      });
      setdocs(document);
  }, []);
user_134318190

I'm guessing the appended id is a reference to the owner's id? In this case, would it be an option to fetch the owner list and use everyone's id to build a list of collection ids and then get all of their data?

If not, I only see to options:

  1. Rethink your database structure - maybe use a unified pets collection and have a reference with/to that id in the pet documents.
  2. Create a cloud function in which use @google-cloud/firestore to get the list of collections. There are tons of resources out there to help you get started with firebase cloud functions. Their documentation is pretty good also, and probably the most up-to-date
const functions = require('firebase-functions')
const { Firestore } = require('@google-cloud/firestore');

module.exports = functions
  .region('europe-west3') // use the region you want here
  .https.onRequest(async (request, response) => {
    try {
      const firestore = new Firestore();
      const collections = (await firestore.listCollections()).map(collection => collection.id)

      response.json({ data: collections })
    } catch (error) {
      response.status(500).send(error.message)
    }
})

You'll get and endpoint which you can use to fetch the collection ids (e.g.: https://your-project-name.cloudfunctions.net/collections)

const [pets, setPets] = useState([]);
const [collectionIds, setCollectionIds] = useState([])

useEffect(() => {
  fetch('https://your-project-name.cloudfunctions.net/collections')
    .then(response => response.json())
    .then(({ data }) => setCollectionIds(data))
}, [])

useEffect(() => {
  collectionIds.forEach((collectionId) => {
    // There are better ways to do this,
    // I'm just using your approach so you can focus on the rest of the code
    db.collection(collectionId).onSnapshot((snapshot) => {
      setPets((currentPets) => [...currentPets, ...snapshot.docs.map((doc) => doc.data())])
    })
  })
}, [collectionIds])

Please note that these are very high-level implementations, there's no error handling, no teardowns or anything, so keep that in mind. Hope it helps, good luck!

user_62730420
Related