Accessing URL Parameters in Meteor-React's createContainer

643 views Asked by At

In my React/Meteor app that uses react-router, I am trying to pass the URL parameters (example URL: /user/P8HDQMAuapRESoWo6) into createContainer, which fetches the result of the first MongoDB query

let user = Meteor.users.findOne({ _id: this.props.params.id});

to run the second MongoDB query

        users: Meteor.users.find(
            { 
                'location': {
                    $near: {
                        $geometry: {
                            'type': 'Point',
                            'coordinates': user.location.coordinates
        ...

However this results in the error

Uncaught TypeError: Cannot read property 'params' of undefined
  1. How can we access the URL parameters or this.props.params?
  2. Should we run the first Mongodb query Meteor.users.findOne() inside createContainer?

User.jsx

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

export class User extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                Something
            </div>
        )
    }
}


export default createContainer(() => {
    Meteor.subscribe('allUsers')

    let user = Meteor.users.findOne({ _id: this.props.params.id});

    return {
        users: Meteor.users.find(
            { 
                'location': {
                    $near: {
                        $geometry: {
                            'type': 'Point',
                            'coordinates': user.location.coordinates
                        },
                        $maxDistance: 400
                    }
                }
            }
        ).fetch()
    }
}, User);

Is it ok to wrap the reuturn function like this?

export default createContainer(({params}) => {
 Meteor.subscribe('allUsers')

    let user = Meteor.users.findOne({ _id: params.id});

    if(user) {   
        return {
            users: Meteor.users.find(
                { 
                    'location': {
                        $near: {
                            $geometry: {
                                'type': 'Point',
                                'coordinates': user.location.coordinates
                            },
                            $maxDistance: 400
                        }
                    }
                }
            ).fetch()
        }
    } else {
        return { users: [] }
    }
}, User);
1

There are 1 answers

1
Drew Schuster On BEST ANSWER

createContainer accepts the props from react-router (or any parent) as function arguments. This should work:

export default createContainer(({params}) => {
 Meteor.subscribe('allUsers')

    let user = Meteor.users.findOne({ _id: params.id});

    return {
        users: Meteor.users.find(
            { 
                'location': {
                    $near: {
                        $geometry: {
                            'type': 'Point',
                            'coordinates': user.location.coordinates
                        },
                        $maxDistance: 400
                    }
                }
            }
        ).fetch()
    }
}, User);