Parse React - Observe Objects created by Parse.User.current()

Question

I'm using the excellent parse-react library to get Parse and ReactJS to work together nicely (n.b I've only been playing around for a few hours so apologies if I've misunderstood any of the basics of reactjs). All was going well until I wanted to query a table for all objects created by the current user (Parse.user.current())

The observe method works correctly on load and the view is rendered with the correct objects (the objects created by the current user). However if I mutate the data and add a new object then the view doesn't re-render.

Abstracted code:

module.exports = React.createClass({
    mixins: [ParseReact.Mixin],
    getInitialState: function() {
        return {
            selected: null
        };
    },
    observe: function() {
        return {
            places: (new Parse.Query('Place'))
                        .equalTo('user', Parse.User.current())
                        .descending('createdAt')
        };
    },
    clickHandler: function(event) {

        var id = event.target.id;
        if (id === 'new') {
            ParseReact.Mutation.Create('Place', {
                name: 'New Place',
                user: Parse.User.current()
            }).dispatch();
        } else if(id.indexOf('Place:') === 0) {
            this.setState({
                selected: id.substring(6)
            });
        }

    },
    render: function() {

        var that = this;
        var navItems = this.data.places.map(function(place) {
            return (
                <UserNavItem id={place.id} key={place.id} label={place.name} selected={that.state.selected === place.objectId} onClick={that.clickHandler}/>
            );
        });

        return (
            <ul>
                {navItems}
                <UserNavItem id='new' label='+ New Place' onClick={this.clickHandler} />
            </ul>
        );

    }
});

If I remove the part of the query that specifies the user:

.equalTo('user', Parse.User.current())

Then it works; new place objects appear in the list when added.

Has anyone got any idea what I'm doing wrong?

Am I using Parse queries incorrectly? It always seems strange that getting the data pertaining to the current user is a bit of a pain when this seems like such a common use case?

Thanks!

Answer 1

The solution is to call the .refreshQueries() method of the component when the new object is successfully created in Parse as described here.

My updated example:

            ParseReact.Mutation.Create('Place', {
                name: 'New Place',
                user: Parse.User.current()
            })
            .dispatch()
            .then(function() {
                this.refreshQueries();
            }.bind(this));

Thanks very much to Joshua Sierles over on the ParseReact github repo for pointing me to the solution. If you are on SO Joshua I'll give you the credit if you post your answer here :D