How to fetch minimal data for List Views and detailed data on demand with Firebase Firestore?

Question

I'm working on a front-end application where I need to display a list of projects for a user. Each project contains a lot of data.

For my list view, I'm aiming to:

1. Fetch only essential metadata for each project, enough to identify the project to the user.
2. Avoid loading the full data for all projects initially to ensure faster loading and to save on bandwidth.

Then, when a user clicks on a specific project from the list:

1. I want to fetch the complete detailed data for that single project.

I'm using Firebase Firestore as my database.

My idea is to add a subcollection with one document with the detailed data:

projects (collection)
|
|-- projectId1 (document)
|   |-- title
|   |-- description
|   |-- createdDate
|   |
|   |-- details (sub-collection)
|       |
|       |-- detailId1 (document)
|           |-- fullDescription
|           |-- images
|           |-- ...
|
|-- projectId2 (document)
...

Has anyone implemented a similar pattern? What's the best approach to achieve this? Any suggestions or best practices would be much appreciated!

Answer 1

As Alex has explained in his question, with the Client SDKs it is not possible to get only a subset of the fields for a Document. When you fetch a Document you get it with all its fields (it is the same when fetching a collection).

But getting only a subset of the fields for a Document is possible with the Firestore REST API: With the REST API you can use a Projection when fetching a collection. In the payload you pass to the API call you list the documents' fields to be returned.

Parsing the result of the API call (JSON) is not as easy as getting the data from the Client SDK but for few fields it's worth it, since you don't need to denormalize your data.

So, if the number of fields representing the "essential metadata" is not very high (more or less around 5 fields) this solution is very interesting for fetching the "list view". Then, when you want to fetch a specific Project document, you can use the client SDK.

---

Concretely you need to use the runQuery method and pass as payload a StructuredQuery with the following format:

{
  "select": {
          fields: [
            {
              fieldPath: "title",
            },
            {
              fieldPath: "description",
            },
            // ...
          ],
        },
  "from": [
          {
            collectionId: "projects",
          },
        ],
  "where": {  // Optional
    object (Filter)
  },
  "orderBy": [   // Optional

    {
      object (Order)
    }
  ],
  "startAt": {    // Optional

    object (Cursor)
  },
  "endAt": {    // Optional
    object (Cursor)
  },
  "offset": integer,    // Optional
  "limit": integer   // Optional
}

Answer 2

1. Fetch only essential metadata for each project, enough to identify the project to the user.

2. Avoid loading the full data for all projects initially to ensure faster loading and to save on bandwidth.

These are common practices. It's best to download only the data that you're interested in. Unfortunately, there is no way you can only read some fields of a document with the client SDKs for mobile or web. It's the entire document or nothing. So in such a case, you should denormalize the data. This means that you can have in a collection lighter versions of the document and in another one the full versions. So you have to display a list of light objects, as Cloud Firestore is optimized for storing large collections of small documents, and on the click, perform another request and get the full object.