[react-meteor-data] How do I parameterize the container component?

1

I use a container around a react-meteor-data container so I can change the query of my subscription.
This works fine (see code below).

Now I want to parametrize the component I pass to “createContainer” (“SupportTable” in this case).

How do I do this?

export default class SupportTableContainer extends React.Component {
  constructor(params) {
    super(params);
    this.state = {
      query: {},
    };
  }
  render() {
    return <InnerContainer params={ this.state }
    />;
  }
}

const InnerContainer = createContainer(({ params }) => {
  const { query, options } = params;
  const bookingsHandle = Meteor.subscribe('bookingsTable', query, options);
  const data = Bookings.find().fetch();
  return {
    data
  };
}, SupportTable);
2

What do you want to parametrize in the SupportTable? Everything you return in the container-function will be passed as props to the nested Component.

And why do you wrap a stateful-component around the container?

Also be careful when passing query and options to subscription. If this is direcly passed to Bookings.find(), any user can fetch every data from this collection. That can be a big security hole.

Also try to repeat the query in your container, because Bookings.find() will return more than asked, if another container on the page subscribes to a different subset of the Bookings

3

What do you want to parametrize in the SupportTable? Everything you return in the container-function will be passed as props to the nested Component.

I want to replace SupportTable with another component. I found a solution. I just added this to my constructor:

    this.table = createContainer(({tableProps, params}) => {
      const {subscription, collection} = tableProps;
      const {query, options} = params;
      const bookingsHandle = Meteor.subscribe(subscription, query, options);
      const data = collection.find().fetch();
      return {
        data
      };
    }, this.props.table);

And why do you wrap a stateful-component around the container?

So I can change the “query” state, i.e. the table gets updated when the query changes.

Also be careful when passing query and options to subscription. If this is direcly passed to Bookings.find(), any user can fetch every data from this collection. That can be a big security hole.

Indeed. Only for admins this is.

Also try to repeat the query in your container, because Bookings.find() will return more than asked, if another container on the page subscribes to a different subset of the Bookings

Good idea.