# Retrieving Data from Firestore

Once Firestore it initialized, it is possible to retrieve data from the Firestore database. Data can be retrieved by a collection of documents or by one document at a time.

# Collection

To retrieve an entire collection, it is best to use the onSnapshot method. While using this method may appear confusing at first, it is ideal because provide real-time updates of the Firestore database.

The onSnapshot method take a callback function, which is call immediately with the current contents of the collection. Then, each time the contents change another call updates the collection snapshot. The forEach method is used to access each document of the collection.

In a Vue project, a collection will often be retrieved from inside a lifecycle hook such as created or mounted.

# Basic Vue project

In the code below, the 'restaurants' collection is retrieved from the lifecycle hook of the root component using the db variable created during initialization. Each document is added to an empty, temporary array. Then the temporary array is used to replace to value of the restaurants data property.

const app = Vue.createApp({
  data: function () {
    return { restaurants: [] }
  },
  created: function () {
    db.collection('restaurants')
      .onSnapshot(snapshot => {
        const data = []
        snapshot.forEach(doc => data.push({
          id: doc.id,
          name: doc.data().name,
          city: doc.data().city
        }))
        this.restaurants = data
      })
  }  
})

# Vue CLI project

Using Firestore in a Vue CLI project does not differ much from the basic Vue project. In the code below, begins by importing the db variable from the src/db.js. Then the 'restaurants' collection is retrieved from the lifecycle hook of a single file component. Each document is added to an empty, temporary array. Finally the temporary array is used to replace to value of the restaurants data property.

import db from '../db.js'

export default {
  data: function () {
    return { restaurants: [] }
  },
  created: function () {
    db.collection('restaurants')
      .onSnapshot(snapshot => {
        const data = []
        snapshot.forEach(doc => data.push({
          id: doc.id,
          name: doc.data().name,
          city: doc.data().city
        }))
        this.restaurants = data
      })
  }  
}

# Document

To retrieve data from a Firestore document, requires first selecting the collection (collection()), then the document (doc()) by its id, and finally using the get() method to make the request. The get() method returns a promise, while the data is being fetch, so the then() method is used to process the data.

Like retrieving a collection, a document will often be retrieved from inside a lifecycle hook such as created or mounted.

# Basic Vue project

In the code below, a document of the 'restaurants' collection is retrieved from the lifecycle hook of the restaurant-details component using the db variable created during initialization. The data() method is used to retrieve data from the document.

const app = Vue.createApp({})

app.component('restaurant-details', {
  props: ['id'],
  data: function () {
    return { 
      name: '',
      city: ''
    }
  },
  created: function () {
    db.collection('restaurants').doc(this.id).get()
      .then(doc => {
        if (doc.exists) {
          this.name = doc.data().name
          this.city = doc.data().city
        }
      })
  }  
})

# Vue CLI Project

In the code below, begins by importing the db variable from the src/db.js. Then document of the 'restaurants' collection is retrieved from the lifecycle hook of a single file component. The data() method is used to retrieve data from the document.

import db from '../db.js'

export default {
  props: ['id'],
  data: function () {
    return { 
      name: '',
      city: ''
    }
  },
  created: function () {
    db.collection('restaurants').doc(this.id).get()
      .then(doc => {
        if (doc.exists) {
          this.name = doc.data().name
          this.city = doc.data().city
        }
      })
  }  
}