Why is my data loading randomly?

help
1

When the page loads I get the ‘posts’ from database in the following order.

783×466 27 KB

But when a user navigates to the module 1 or module 2 (singlePost page) and the user tries to return to the ‘/’ the data gets loaded randomly.

752×444 12.4 KB

How do I fix this issue? Is this an issue with FlowRouter? My Pub/Sub?

Routes.jsx
…

export default function (injectDeps, {FlowRouter}) {
  const MainLayoutCtx = injectDeps(MainLayout);

  FlowRouter.route('/', {
    name: 'posts.list',
    action() {
      mount(MainLayoutCtx, {
        content: () => (<PostList />)
      });
    }
  });

…

Navigation.jsx:

<Panel bsStyle="primary"><a href={FlowRouter.path('/')}><h1 className="pull-middle">Microsoft Word Training</h1> </a></Panel>

Publish function:

import {Posts, Comments} from '/lib/collections';
import {Meteor} from 'meteor/meteor';
import {check} from 'meteor/check';

export default function () {

Meteor.publish('posts.list', function () {
  const selector = {};
  const options = {
    fields: {_id: 1, title: 1, content: 1, startDate: 1},
    sort: {startDate: 1}
  };

  return Posts.find(selector, options);
});

Meteor.publish('posts.single', function (postId) {
  check(postId, String);
  const selector = {_id: postId};
  return Posts.find(selector);
});

Meteor.publish('posts.comments', function (postId) {
  check(postId, String);
  const selector = {postId};
  return Comments.find(selector);
});

}

Database schema:

"_id": "a9d4dbeb-3b80-4b08-94bb-5d8e41a58dae",
"content": "April 20th: 1:30 - 3:30 PM.",
"title": "Module 1",
"startDate": "1461177000000",
2

Can you show the source for your <PostList /> component?

3 
import React from 'react';
import { Panel, Col } from 'react-bootstrap';
const PostList = ({posts}) => (
  <div>
      <Col xs={12} md={6} lg={3}>
  <div className="text-center">
    <Panel header="Instructor Information" bsStyle="primary">
      <img src="adsfds.jpg"></img><br/>
      <strong>Instructor:</strong> asdfdsfsaf
        <br/><strong>asdfdsf</strong><br/>
<p>asdfsdfsadfdsaf</p>
      </Panel>
  </div>
</Col>
<Col xs={12} md={6}>
  <div className='postlist'>

    <ul>
      {posts.map(post => (
        <div key={post._id}>

          <div className="client">
            <a href={`/post/${post._id}`}><span className="logo">
            </span></a>
            <h2>
              <a href={`/post/${post._id}`}>{post.title}</a>
              </h2>
              <h3>{post.content}</h3>
            </div>
        </div>

      ))}
    </ul>

</div>
</Col>
</div>
);

export default PostList;
4

Thanks - we’ll need to go up a bit higher; can you show where you’re subscribing to your publication, and loading your posts?

5

You probably forgot to put a sort option on the client-side Posts.find()

6

Thank you! Replaced the Post.find on the client with the proper sort. I can’t believe I missed this. Thank you again! @hwillson and @nlammertyn

import PostList from '../components/postlist.jsx';
    import {useDeps, composeWithTracker, composeAll} from 'mantra-core';

    export const composer = ({context}, onData) => {
      const {Meteor, Collections} = context();
      if (Meteor.subscribe('posts.list').ready()) {
        const posts = Collections.Posts.find().fetch();

//     const posts = Collections.Posts.find({}, {sort: {startDate:1 }}).fetch();

        onData(null, {posts});
      }
    };

    export default composeAll(
      composeWithTracker(composer),
      useDeps()
    )(PostList);