IjzerenHein / firestorter

Use Google Firestore in React with zero effort, using MobX 🤘
http://firestorter.com
MIT License
378 stars 50 forks source link

How do I use a Document in a mobx computed value? #62

Closed jonesnc closed 5 years ago

jonesnc commented 5 years ago

I have a Mobx Store with a computed that observes the hasData field in theuserDoc Document:

// Mobx Store
class UserStore {
    @observable authUser;
    @observable userDoc: Document;

    @computed
    get isAuthenticated(): boolean {
        console.log('computed!');
        return !!this.authUser &&
               !!this.userDoc &&
               !this.userDoc.isLoading &&
               !!this.userDoc.hasData;
    }
}

// Component
@inject('UserStore')
@observer
class _MyComp extends React.Component {
    public render() {
        const { UserStore } = this.props;
        return (
            <div>
                { UserStore.isAuthenticated ? 'authenticated' : 'not authenticated' }
            </div>
        );
    }
}

I never see the output html change to authenticated as it should, and computed! is never printed to the console. I know the document is correctly loading and authUser is populated because I have other code that reads data from userDoc.

Do you know how I can get my mobx store to correctly listen for changes to the Document?