A
A
Alexander Wolf2016-06-29 20:50:59
JavaScript
Alexander Wolf, 2016-06-29 20:50:59

How to cross FlowRouterSSR with React (createContainer)?

Good evening! While developing the project, I stumbled over "React attempted to reuse markup in a container but the checksum was invalid".
This is understandable, because FlowRouter 4 abandoned subscription wait and now we need to render the template with data that has not yet arrived (for some reason, fast-render is late by milliseconds).
So the question is: how to make such a design work normally?

import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { mount } from 'react-mounter';
import Items from './collections/items';

const Page = React.createClass({
  render() {
    return <div>{this.props.items.map(item => <div key={item._id}>{item.name}</div>)}</div>;
  }
});

function handler() {
  var data = {};
  var handle = Meteor.subscribe('items');

  if(handle.ready()) {
    data.items = Items.find().fetch();
  } else {
    data.items = [];
  }

  return data;
}

const PageWrapper = createContainer(handler, Page);

FlowRouter.route('/', {
  action() {
    mount(PageWrapper);
  }
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question