Data Fetching Server Components

[eminx]

Is your feature request related to a problem? Please describe. I would like to know how to utilize server components in the scope of Meteor+Mongo.

Describe the solution you'd like I'd like a sample component that with an async function, it can directly call the db and get the data I need to send to the client. It also needs to be able to read the params.

Describe alternatives you've considered Alternative, I don't know...

Additional context I would also like to help with documentation. It's kinda missing.

[github-actions[bot]]

Thank you for submitting this issue!

We, the Members of Meteor Community Packages take every issue seriously. Our goal is to provide long-term lifecycles for packages and keep up with the newest changes in Meteor and the overall NodeJs/JavaScript ecosystem.

However, we contribute to these packages mostly in our free time. Therefore, we can't guarantee you issues to be solved within certain time.

If you think this issue is trivial to solve, don't hesitate to submit a pull request, too! We will accompany you in the process with reviews and hints on how to get development set up.

Please also consider sponsoring the maintainers of the package. If you don't know who is currently maintaining this package, just leave a comment and we'll let you know

[eminx]

I tried this:

async function Sample(props) {
  // console.log(props) is an empty object. 
  const document = await call('getDocumentById', 'documentId'); // `call` is custom async function to run against the mongodb.
  // console.log(document) this works!
  return <h1>{document.title}</h1>; // doesn't work
}

const AppRoutesSSR = [{
    path: '/documents/:documentId'.
    element: <Sample />
}, {
    ...
}]

renderWithSSR(AppRoutesSSR, {
  renderTarget: 'root',
});

So with the above code, it works to query the db and renders the document data in the console. However, I get into a 404 error that says: No routes matched location "/sw.js" and then also this typical React error as below, although I'm only trying to render the string title of the document, not the whole object:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Then I would also like to know how in the server component am I supposed to reach the query params? I would expect with the props, but it's an empty object. :/

Thanks ahead for the help. And much gratitude to those who made this package; feels like a blessing from clutter of SSR. Thanks!

[eminx]

OK, I'm progressing!

I figure out this package probably only works for Meteor subscriptions. At least this worked for me:

function Sample(props) {
    Meteor.subscribe('document', 'documentId');
    const document = Documents.findOne();
    return <h1>{document.title}</h1>
}

But how can I access the documentId that is supposedly in the query param in the url? What's the way to inject it into the component or access it?

[eminx]

I was wrong, one can use useParams just fine!