Provide Document id when fetching a firestore collection

[Marc Coët]

Hey @rakannimer , I was trying out your lib to quickly build a Firebase project because I probably won't need any fancy feature for quite a while but got 'stuck' on what I see as a pretty basic use case.
I am querying a firestore collection and I want to update a document in that collection but I don't have the id...
It should be pretty easy to set a key for the metadata in each document of the array returned, something like _metadata or _documentMetadata or whatever.
I tried to make sense of the code but I have never used typescript and I am missing a few pointers to figure this out quickly enough.
Happy holidays :)

[Marc Coët]

I see there is an __id key on the collection itself but it is null obviously. Maybe you intended to set ids on docs and it is a bug then ?

[Rakan Nimer]

Hey @MarcCoet

Thanks for raising the issue, I added an ids field to the render props args of the collection and an id field to the render props args of the document.

Can you give it a try now ?

I simplified a lot of the code that was a bit contrived. So please feel free to raise any more issues you face 👍

Cheers !

[Marc Coët]

Hey @rakannimer . Thanks for your reactivity.
I've just given it a try and somehow the same FirestoreCollection does not work anymore. It seems like it is not taking the path prop properly anymore.

Appart of that I will raise another issue for another part of the code but I will need to go back to my own implementation probably because I have a deadline in 2 days. ;)

[Michiel Helvensteijn]

I'm running into the same issue. There seems to be no way to simply get all document keys for a given collection.

[Robert Sasak]

For those like me who prefer to have it merged into one object

({ isLoading, value, error, ids }) => 
  value
    .map((v, i) => ({ v, id: ids[i] }))
    .map(({id, name})=> (
      <div key={id}>{name}</div>
    ))

[Niccolò Cantù]

Hi, having ids inside the same object would be wonderful!

Currently I'm using a HOC to collect and merge the props before feeding into the dumb component.

import { compose, withProps } from 'recompose';

const enhance = compose(
  withProps(({ value, ids }) => {
    if (value === null || typeof value === 'undefined') return null;
    return {
      value: value.map((val, i) => ({
        ...val,
        id: ids[i],
      })),
    };
  }),
);