[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 using using the code below.

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

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

CodePudding user response：

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);
  }, []);

CodePudding user response：

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!