React-native DDP best implementation?

I’m working on a react native app with a meteor backend. I know to tie these two together I have to use the node package ddp-client for the app to connect. https://www.npmjs.com/package/ddp-client

But what is the best practice for going about this. Should I:

  1. Define the DDPClient and connect in index.ios.js where i keep connected and find some way to issue requests from the main app component? (I wouldnt know how to do this however but it would be a start.)

  2. Only connect through dpp on each component that I need and issue the meteor calls from there?

Really any real example would help. Most of the code I find online are single page examples with not much else. Or just a push in the right direction.

p.s. The app is a marketplace. Thanks!

1 Like

Hey i found this repo on github that has the whole example built out perfectly.

This is my favorite

2 Likes

A bit late here but I would have to second @jitterbop’s suggestion of https://github.com/inProgress-team/react-native-meteor. I wrote the meteor-todos-react-native example and plan to migrate it over to react-native-meteor soon (as time permits).

I’m curious, Are you planning to migrating this project,

to the latest react-native-meteor interface? I would like to hear your thoughts about the interface between React-Native, Redux, and Meteor (via ddp).

Eventually yes I would. The project you linked to is just an experiment - I was trying to port over some tightly linked application code (from a larger project) to something that would be as pluggable as possible.

I think the first thing I’ll migrate to react-native-meteor is the react native meteor boilerplate.

I’ve got a blog post on React Native, Redux, and Meteor slated for the end of this month so keep an eye out!

I am working on a social app in RN and had a lot of problems with different ddp clients (ddp-client was the first I’ve tried), especially using Meteor 1.3 with Mantra. After some time (tried 4 libraries) I came to (mentioned by @jitterbop and @spencercarli already)

It uses the same syntax as in Meteor, so you can use the usual

Meteor.userId
Meteor.subscribe
Collection.find

etc. They have an awesome support on GitHub and StackOverflow and helped me within minutes after I have posted and are extreme friendly on top (wish I could say that about the support of many big companies…). Things that work out of the box that might have problems in other frameworks:

  • Signup, login
  • Subscriptions
  • Reactive data source (e.g. automatically recognise if user was logged out, etc.)

On top they have some cool stuff like a special list view where you only pass the collection name and it fills itself. The repository seems to be updated very frequently as well. It also made the code to write much shorter and self explanatory. Using ddp-client and similar required quiet an amount of time, just to make simple things work, while with react-native-meteor everything was done within short time (and less pain).


To answer your question:

Using ddp-client: it might be most easy to create a singleton that handles the connection to the database and one class for each collection.

The db.js for example handles connect, disconnect, automatic reconnect and offers some promises to check if the user is connected (so you GUI can react accordingly).

The collection classes handle everything which is related to a particular class. For example it you have a todo list, the todos.js could handle

create todo item
find all todo items
set todo item as completed
etc.

The db.js is included everywhere you need it, so you only establish one DDP connection (to keep the server load down and also the network traffic).

The collection classes also import the singleton.

You can find a tutorial for this kind of implementation here.

1 Like

@faceyspacey has brought up several worth noting restriction facing the react-native-meteor solution and as a result seems to think a solution that would allow @spencercarli work to play well with Redux. The discussion is interesting and you can find it here.