VueJs + Firebase

Question

I'm starting to use VueJS with Firebase (and VueFire), but I'm starting to struggle a bit about how to structure the data.

My case is pretty simple.

I have a list of suppliers and a list of products.

A product can only be linked to one supplier, and a supplier can have multiple products.

And I have different views :

List of all products for all suppliers
List of products for one supplier
Detail of one product with the supplier.

For the 1st and 2nd views, I have no issue with the following structure

products
    - productKey1
        - name : Product1
    - productKey2
        - name : Product2
supplier-products:
    - supplierKey1
        - productKey1
             - name : Product1
    - supplierKey2
        - productKey2
             - name : Product2
supplier:
    - supplierKey1
         - name : Supplier1
    - supplierKey2
         - name : Supplier2

I can easily show a list of all products from "/products" and for each supplier from "supplier-products/supplierKey"

But what about a view with the product detail + the supplier detail.

What is the best way to do that ?

Adding the supplier information into each products ?
Add a kind of foreign key into products ?
Another way to do it ?

Thanks for your help.

score 0 · Answer 1 · answered Nov 02 '17 at 22:10

I have a similar problem in my app, where I have a similar relationship between Businesses and Locations. I have found that the best solution is to have a store for Businesses, a store for Locations, and a store for the joins between them.

In your case:

products: [
  { productKey: 1, name: 'Product1' },
  { productKey: 2, name: 'Product2' },
],
suppliers: [
  { supplierKey: 1, name: 'Supplier1' },
  { supplierKey: 2, name: 'Supplier2' },
],
supplierProducts: [
  { productKey: 1, supplierKey: 1 },
  { productKey: 2, supplierKey: 2 },
]

Now, you can easily filter the list of supplierProducts by the currently selected supplierKey, or the currently selected productKey, and then use the opposite key to pull the right list for your view.

score 0 · Answer 2 · answered Apr 18 '21 at 22:19

While I do respect your choice of using Firebase, I would have opted for an SQL database for your case because you're gonna have a lot of relations.

aidangarza's answer is one way to do it but it also expensive when thinking in long term. Firebase will count your reads every time you query from supplierProducts and then when you want to show all the products and suppliers data that are linked.

Let's say a supplier has 300 products, every time you want to query all products linked to that supplier, Firebase will count 300 reads.

So, what I recommend you is to assign every product to a supplier et then copy the product data to the supplier data :

"products": {
    "productKey1": {
      "name": "Product1",
      "supplierKey": "supplierKey1"
    }
}


 "supplier-products":{
    "supplierKey1":[
      {"id":"productKey1", "name" : "Product1"}
    ],
    "supplierKey2":[
      {"id":"productKey4", "name" : "Product4"},
      {"id":"productKey10", "name" : "Product10"},
      {"id":"productKey15", "name" : "Product15"}
    ],
    "supplierKey3":[
      {"id":"productKey5", "name" : "Product5"}
    ]
}

Now, if you want to fetch all the products from X supplier, you simply have to fetch data from (supplier-products/supplierKeyX). Firebase will only count this as 1 read instead of the total amount of products linked to supplier X.

If you worry on how you're gonna need to update all the references of a product if for ex. the name changes. I recommend you watch this video that talks about Multi-path updates.

After all, denormalization is the core of NoSQL databases, if there are to much relations between collections, it will be very hard to maintain your NoSQL DB.

VueJs + Firebase

2 Answers2