Get Doc but id always equals null about vuex-easy-firestore HOT 13 CLOSED

@adamelevate Thanks for your post.
What do yoou mean "when calling a single document" do you use dispatch('fetch')?

Or do you mean with a module that is firestoreRefType: 'doc' ?

from vuex-easy-firestore.

Maybe I'm using this wrong, but I thought you needed to have a channel open for each collection or document you wanted to work with.

For me, I have "locks" that need to be listed and a single "lock" I need to view/edit. So I have two channels, as shown in my "store.js" code above, and I'm trying to get a single document from the second channel called "lockData" in the "component.js" example above.

from vuex-easy-firestore.

@adamelevate You need to have the channel open to receive the data from the server yes.

However, the collection is enough.

In your case the locksData module is enough:

  firestorePath: 'locks/',
  firestoreRefType: 'collection',

And you can completely remove the single lockData module.

So in your vuex store: state.locksData.data will receive all locks for the filter's you've set. And you can work with all those docs like so:

// eg.
const id = '' // get the id
dispatch('locksData/patch', {id, active: false}) // to set active to false of a specific lock.

Is there a special reason that you need another module with a single lock? → if not just delete this module.

from vuex-easy-firestore.

No reason, maybe I don't understand the difference between collection and a docs mode. I guess it's silly to have to calls to firestore when I've already loaded the data once, the collection has every bit of data I could want.

Either way, the doc mode still returns a null id, seems strange... right?

from vuex-easy-firestore.

Yes, I will make sure that the single doc in 'doc' mode also fills in the id (which is the final part of the firestorePath in that case)

Thank you.

About when to use 'collection' and when to use 'doc'

Use firestoreRefType: 'doc' if you want to just work with a single doc and not a collection of docs.

Eg. My users have a single "user settings" document saved per user. My module looks like:

{
  firestorePath: 'users/{userId}/data/settings', // settings is a 'doc' inside the collection called "data"
  firestoreRefType: 'doc',
  moduleName: 'userSettings',
  statePropName: '', // save doc data directly to module state
}

Do you understand?

If there is something you need to do with a lock inside your locksData, and you can't find out how, pls ask me again!

from vuex-easy-firestore.

Yeah, I understand your example. I think it's just getting used to the firestore ecosystem and normally I don't have the syntactic sugar this provides :)

from vuex-easy-firestore.

BTW, in your case you should generate lock-components from your vuex-module with the collection. You can do so like

<lock-component
  v-for="(data, id) in $store.state.locksData.data"
  :lock="data"
  :key="id"
/>

and then you can create a component called LockComponent.vue with the prop lock which will get the data.

Then in the LockComponent.vue you could do things like:

props: ['lock'],
methods: {
  toggleActivation () {
    const newState = !this.lock.active
    this.$store.dispatch('locksData/patch', {
      id: this.lock.id,
      active: newState
    })
  },
}

I hope that's useful! : D

from vuex-easy-firestore.

Ok, yeah that makes sense... I'm still stuck in the architecture though.

For example,

1. On the homepage I want to show all undelivered keys,
2. When viewing a single lock, I want to show all keys for that lock.

Am I opening two different channels or performing 2 fetch's? Does the "where" and "orderby" filters affect the fetch also? Sorry for nob questions, just don't understand how this library works with my use case... ty for your time!

from vuex-easy-firestore.

@adamelevate

1. all undelivered keys
   →　this should be a firestore collection and add the filters to get only the undelivered ones.

2. when viewing a single lock, show all keys for that lock.
   →　this will depend on how your database looks like. Can you give a little more info on that?

So it will depend on if all your keys are in the same collection or not, and how the link is made between which locks have which keys, but I can already give you these two options to think about:

Option A:

You could eg. use fetchAndAdd or just fetch to get the keys for a single lock, if the user clicks on a lock.
Please go through the documentation on fetch again, I just updated it a little.

Some things to think about with this method:

• slightly slower loading time when opening a lock because the keys are only fetched then

Option B: Only possible when all keys are in the same collection!

You could just retrieve all keys on beforehand via a firestore collection (and the same method as at 1. above). In this case you will get all keys in your vuex module, but only show the relevant ones to the user when he clicks on a lock.

This means that filtering the keys will happen in the front-end via JavaScript.
Some things to think about with this method:

• Keys will load faster when the user selects a lock, since they are already in your vuex module
• slightly longer initial loading time because you have to open the DBChannel
• not a good choice when there are eg. 1000s of keys (they all get retrieved and added to your vuex module), but a user would only look at a few dozen keys each session → option A might be better in this case.

from vuex-easy-firestore.

Dude, you are going above and beyond to help me, I super appreciate it.

My database has locks, keys, and bunches of other stuffs. Each customer will have Thousands of locks and Thousands of keys, nature of the business.

There likely won't be many undelivered keys at any given point but there could be 50-100, I already have an index for that "delivered = false". That's where I'm opening my dbchannel, but once a user get's to a single lock page, I really need to make sure I have all the keys, "delivered true & false" for that single lock.

My idea was to go with Option A, since I don't want to call thousands of keys that will never be seen. I need my db to be flat since many people at a customer will need to see the keys and subcollections aren't great for that, also have cloud functions that run to check for unused "key codes" to attach to keys after creation with other little helper functions.

Lock page method "getKeys()"

this.$store.dispatch('keysData/fetch', 
{whereFilters: [['lockId', '==', this.lockId],['cId', '==', this.user.cId]], orderBy: ['active_date']})
       .then(querySnapshot => {
         if (querySnapshot.done === true) {
           // console.log('querySnapshot',querySnapshot);
           vThis.isloadingKeys = false;
           vThis.loadKeys(querySnapshot);
           return 'all docs retrieved'
         }
       })
       .catch(console.error)

It worked once, asking me to make an index, which I did, then never worked again.

from vuex-easy-firestore.

@adamelevate Please try to read the documentation on fetch again.

I had recently added fetchAndAdd opposed to just fetch.

In your code snippet you are fetching, but not doing anything with the querySnapshot, that's why nothing happens. So I reckon you want to use fetchAndAdd instead!!

EDIT:

Sorry, I just saw vThis.loadKeys(querySnapshot).
You need to move this OUTSIDE of querySnapshot.done === true.

querySnapshot.done === true only happens when there are no more keys to fetch and thus there will be 0 keys in your response.

But honestly, maybe you can better just try fetchAndAdd instead.

EDIT 2:

Also check "A note on fetch limit:" in the fetch documentation, I have updated that to be more clear as well.

from vuex-easy-firestore.

@adamelevate any luck?

from vuex-easy-firestore.

I made sure that the single doc in 'doc' mode also fills in the id (which is the final part of the firestorePath in that case)
see #53
this closes this issue

@adamelevate feel free to keep on commenting if you are stuck with your fetch problem.

from vuex-easy-firestore.