Meteor - retrieving newest documents

Question

I know there are many questions out there discussing this topic but, all of them I have tried returns an empty array. I have tried:

creating a new publication.
using for loop to retrieve last item (not fast)
looking through the db on the client side.

Here is my publication:

Meteor.publish('notes-newest', function () {
    return Notes.find().sort({$natural: -1}).limit(10);
});

Here is where I am trying to access it:

import { Meteor } from "meteor/meteor";
import React from "react";
import { withRouter } from "react-router-dom";
import { Tracker } from "meteor/tracker";
import { Accounts } from "meteor/accounts-base";

import { Notes } from "../methods/methods";
import SubjectRoutes from "./subjectRoutes/subjectRoutes";
import RenderNotesBySubject from "./renderNotesBySubject";
import Menu from "./Menu.js";

class Home extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: []
    };
  }
  componentDidMount() {
    Meteor.subscribe('notes-newest')
    this.tracker = Tracker.autorun(() => {
      const notes = Notes.find().fetch()
      if(notes == null || notes == undefined){
        return;
      }
      this.setState({ notes })
    })
  }
  renderNewNotes(){
    let notes = this.state.notes;
    let count = 10;
    console.log(notes);
  }
  render(){
    return (
      <div>
        <Menu />
        <h1></h1>
        {this.renderNewNotes()}
      </div>
    )
  }
}

export default withRouter(Home);

New Code

import { Meteor } from "meteor/meteor";
import React from "react";
import { withRouter } from "react-router-dom";
import { Tracker } from "meteor/tracker";
import { Accounts } from "meteor/accounts-base";
import { createContainer } from "meteor/react-meteor-data"

import { Notes } from "../methods/methods";
import SubjectRoutes from "./subjectRoutes/subjectRoutes";
import RenderNotesBySubject from "./renderNotesBySubject";
import Menu from "./Menu.js";

class Home extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: []
    };
  }
  componentDidMount() {
    // Meteor.subscribe('notes-newest')
    this.tracker = Tracker.autorun(() => {
      const notes = this.props.list
      if(notes == null || notes == undefined){
        return;
      }
      this.setState({ notes })
    })
  }
  renderNewNotes(){
    let notes = this.state.notes;
    let count = 10;
    console.log(notes);
  }
  render(){
    return (
      <div>
        <Menu />
        <h1></h1>
        {this.renderNewNotes()}
      </div>
    )
  }
}

export default createContainer(({props})=>{
  Meteor.subscribe("notes-newest", props);
  return{
    list: Notes.find().fetch(),
  }
}, Home);

score 0 · Answer 1 · answered Aug 31 '17 at 04:18

0

Your publication seems to be okay. All you need is to use data container. I recommend to use react-meteor-data for using reactive data loading in meteot.

Create a higher order class to wrap your data and keep your existing component as presentational component which will render the data provided by the data container.

Hope following snippet helps:

export default createContainer(({props})=>{  
  Meteor.subscribe("data.fetch", props);
  return{
    list: CollectionName.find().fetch(),
  }
}, PresentationComponent);

Explanation: createComponent will make sure the reactivity of data and it will send the retrieved data to the PresentationComponent as props.

answered Aug 31 '17 at 04:18

Mostafiz Rahman

8,169
7
57
74

Still no luck.......I uploaded the new code, I am not really an experienced react or meteor user so can you check it out and tell me if I am doing this right? – Stuart Fong Aug 31 '17 at 13:38
Okay so this is where I am now, in the console there is an error that says, "Exception from sub notes-newest id 9GfWBt7xs5HRPNeoY TypeError: Notes.find(...).sort is not a function". And that is why when I console.log(this.props.list) it returns an empty array. Could there be something wrong with my publication instead of the data-container? – Stuart Fong Aug 31 '17 at 14:51

score 0 · Answer 2 · answered Aug 31 '17 at 18:27

0

You're mixing mongodb native syntax with Meteor mongo syntax. You need:

Meteor.publish('notes-newest', function () {
    return Notes.find({},{sort: {$natural: -1}, limit: 10});
});

and ditto on the client:

list: Notes.find({},{sort: {$natural: -1}, limit: 10});

answered Aug 31 '17 at 18:27

Michel Floyd

18,793
4
24
39

When I do this, it works like I want it to, but when a user inserts a document it gets added to the bottom of the list. How would I get it so that it goes to the top of the list – Stuart Fong Sep 04 '17 at 22:16
`$natural` is designed to be used directly in mongodb with `.find().hint({$natural: -1}). AFAIK you can't access `.hint()` from Meteor. What I'd recommend is to define a `createdAt:` key and set that to `new Date()` when you create the record, then sort on that. – Michel Floyd Sep 04 '17 at 22:28
Thanks! I do run into a small error though, I decided to put it into a seperate question here: https://stackoverflow.com/questions/46045393/meteor-sorting-by-timestamp – Stuart Fong Sep 05 '17 at 00:55

Meteor - retrieving newest documents

2 Answers2