Best way on storing and retrieving data from a nosql database like firestore

See more:

Javascript

database

NoSQL

I am developing a personal ledger web/mobile app using Vue3 with Quasar, Pinia and vue router and Firebase for backend. I am in confusion on how to save the transactions on the Firebase's firestore cloud. I have the following possible ways of saving records (trx object has date as a key field):

Year wise records: one record per year, so less records. Saving a new record or updating an existing record is not too complicated, I take current year record, navigate to current month and either insert or modify a transaction. To update, I need a trxid field as a key with unique value for each transaction.

record1: 2022: {
            jan:[{
                    trx1: {....},
                    trx2: {....},
                    trx3: {....},
                    trx4: {....},
                }]
            feb: [{....}]
            mar: [{....}]
            apr: [{....}]
            .....
        }

    record2: 2023: {
            jan:[{
                    trx1: {....},
                    trx2: {....},
                    trx3: {....},
                    trx4: {....},
                }]
            feb: [{....}]
            mar: [{....}]
            apr: [{....}]
            .....
        }

Month wise with year records: 12 records per year. Bit easier to save and update a record, go to the record of month_year record and either insert or update a record. To update, I need a trxid field as a key with unique value for each transaction.

record1: {
        jan_2022:[{
                trx1: {....},
                trx2: {....},
                trx3: {....},
                trx4: {....},
        }]
    }
    record2: {
        feb_2022:[{
                trx1: {....},
                trx2: {....},
                trx3: {....},
                trx4: {....},
        }]
    }
    record3: {
        mar_2022:[{
                trx1: {....},
                trx2: {....},
                trx3: {....},
                trx4: {....},
        }]
    }
    record4: {
        apr_2022:[{
                trx1: {....},
                trx2: {....},
                trx3: {....},
                trx4: {....},
        }]
    }

Single record: On saving a record or updating an existing record need to navigate to theRecord -> the year -> month and either insert or modify a trx. To update, I need a trxid field as a key with unique value for each transaction.

theRecord: {    
        2022: {
                jan:[{
                        trx1: {....},
                        trx2: {....},
                        trx3: {....},
                        trx4: {....},
                    }]
                feb:
                mar:
                apr:
            },
        2023: {
                jan:[{
                        trx1: {....},
                        trx2: {....},
                        trx3: {....},
                        trx4: {....},
                    }]
                feb:
                mar:
                apr:
            }
    }

As Individual transaction records: too many records. on avg. 30 trx. per month, therefore around 360 records per year. Easiest to save a new record and update an existing record as each trx will have an unique id.

record1: trx1: {....},
    record2: trx2: {....},
    record3: trx3: {....},
    record4: trx4: {....},

On retrieving data: When the app is loaded it will show the current month's transactions.

Retrieve all the data when the app is initially loaded and only show the current month's records and every time I change month I simply loop through the data stored in JS variable. The JS variable size will be huge if I retrieve all the data and might be expensive to loop through all the data to show only a single months transactions.

Retrieve data from backend each time I change the month? If I do this way, say I load initially for April 2022, I change to Jan. 2022, I retrieve from backend for Jan. 2022, then I come back to April 2022, therefore I call backend again for April 2022. I feel I am doing too many backend calls.

Mix of 1 and 2. Retrieve only the current month. Every time I change a month, I call backend and add the retrieved data to a JS var, thereby eliminating the need to call backend for already retrieved data. I simply loop through the JS var to get the required data. The JS var will grow in size, but realistically I will not be requiring all the months, therefore the size may not be too huge and it might not be too expensive to loop through to get the required data.

PS: For points 2 and 3: If using Year wise storing, will retrieve for the entire year, so no need to call backend if changing month for the same year, only when change year. For Month wise storing, I simple retrieve based on the month and for Individual transactions I query with WHERE condition on the date key field of trx object. For Single record storing, these points are not applicable.

What I have tried:

Haven't tried yet. Need suggestion before implementing