I have a running webapp with Meteor. No issues here, it’s a Meteor / React / Apollo app.
I want to build a native app that would share the same database / backend. Where should I start ?
Can I use all my apollo queries / mutations an so on from the react native app or shall I create separated method ?
The package react-native-meteor has not been changed for 2 years and lot of open issue. Is it still usable ? I am not using the live update from Meteor with the tracker, just simple queries from Apollo that query the database. Is the best solution to create a REST API on my Meteor app and just use these API routes for my react-native app then ? With the REST API solution I am not sure how to manage all the access limited to connected users.
Kinda strange that there is nothing to rely on ? I’ll try my best with some old tutorials and package and try to propose a solution here… I unfortunately think that is a reason why adoption is not really good with Meteor. Looking for problematic like this one, which is not too crazy and probably happens to a lot of persons, and not finding any proper example/tutorial (which are 1 or 2 year old max or part of documentation) to start is pretty scary.
Well I have a to do list on my project, and considering the lack of answer I am putting the mobile app after other big part as I am scared to waste too much time with no result. But surely will be worked on in the next months. As soon as I have something I’ll keep you posted.
But indeed, we need a more official/maintained integration and more current tutorials especially with Expo. Everything is mostly scattered about and possibly not very current.
@pmogollon thanks will try it. Do you use Expo or react-native CLI? (does it matter ?) Did you try the other package mentioned above ? Is their any pros / cons for any of the two?
But indeed, we need a more official/maintained integration and more current tutorials especially with Expo. Everything is mostly scattered about and possibly not very current.
@townmulti : couldn’t agree more. Maybe it would be good to know if any of the two packages mentioned here could be chose as “the one” by the meteor team and I could start working on a tutorial based on this.
@filipenevola do you have any experience with these two packages ? Is there one which is more recommended to be used? I see someone took the lead on the react-native part on the roadmap, do we know which package he intends to use ? thanks a lot for you help. With these info I could start working on a tutorial tomorrow already as I got my motivation back knowing ressources exist (though well hidden).
Also Expo already manages OTA update if you use the managed workflow but I know that galaxy wants to manage the publishing flow as well according to their roadmap so I am not sure if I should start with expo or react-native cli in order to be helpful and then added to the documentation?
I am thiking to do:
Part1/ set-up Meteor app and RN/Expo app - connect the two
Part2/ Setup accounts with basic flow on the RN app
Part3/ add Graphql on RN side (for meteor side there is already some docs but maybe useful to work on it as well)
I just read in your initial post that you are using apollo.You should try apollo package from cult-of-coders.
About connecting to meteor app from RN with ddp I think the other one wont work because the dependencies are not compatible with the latest version of react native. That was the reason I forked the one I use.
And I dont use expo, but im not sure if it will work as you will need the NetInfo a and AsyncStorage packages that require native implementations. But im not sure, probably expo already allows to use those packages, you will need to try it.
I will probably wont suggest to do a tutorial for the Meteor website with my package as it doesnt replicate the same api as the Meteor original one. You can try other of the forked packages that havent made changes to that.
Yes ideally I’d like to do a “2-in-1” and make a documentation/tutorial for Meteor as well if I manage to have it worked but I see so many different packages, boilerplate, ideas, old and new that I have to say I am getting fully lost on what should be the way. That’s why I hope someone from the Meteor team (@filipenevola ? but I know he is very busy) will jump in to clarify what should be the “official way”.
As I said I was thinking to do in 3 steps but it seems that if I want apollo then I have to start in another direction than if I don’t use apollo (I don’t see any react-native-meteor in the apollo way). I use indeed Apollo on my webapp but for example was not using the meteor-apollo-accounts package with it, I am just managing my users as another Collection in my database that I can query through apollo. I guess I could use it on the native app anyway as mentionned by the Cult of Coders repo.
AsyncStorage and NetInfo are supported by expo AFAIK so maybe it would work.
So with your latest update I am back to not knowing where to start I appreciate the help though!
I managed to have your package work with plain react-native app on ios simulator. I connect to Meteor app and manage to insert items in the databse (hourra!) However when i start run-android I get the following error continuously showing:
Disconnected from DDP server
Any idea ? My meteor server is still running.
Also may I know how you manage accounts on the react native app? can you simple access this.userId on server side without configurating anyting ?
EDIT: ok it’s generally when writing the issue than we got the answer. I won’t delete the post as it can help others, just need to forward the port:
adb reverse tcp:3000 tcp:3000
Though my questions about how to manage accounts still stands, thanks in advance.
I dont use decorators, for now im still using HOC. (I might add hooks in the future to the package)
Sure you can use Meteor.user() anywhere, but it will only be reactive inside a withTracker function.
Yes, that article uses the old way that is no longer available on the package. You need to change connectMeteor to withTracker HOC you can check an example in the readme of the repo.
Another different thing is I removed the callbacks and instead use promises, so you can just use await or .then instead of the callbacks.
Appart from that, everything is the same than in the article.
Thanks for the tips it got me going pretty far already (Login, create account, screen if logged in managed, etc…)
I have one more question though, how do you manage the Reset Password with a native app ?
The link that will be sent will work with the server but I’d like to open this with the app rather, or any other way to solve it ? Thanks again so much for your support.
You have to add DeepLinks to your apps and I will suggest to also use universal links.
Here is an article that can help you to get the deep links working on RN.
In Meteor side you will need to change the password reset link, the easiest way is to intercept the email text like this.
Accounts.emailTemplates.resetPassword.text = function(user, url){
const token = url.substring(url.lastIndexOf('/') + 1, url.length);
const URL = `URL_SCHEME://your-reset-route/${token}`
return `Hello ${user.profile.firstName},
You have asked for a password reset link, right? If so, please click the next link to reset your password.
${URL}
Cheers.
`;
}
I am trying to build the same thing and found this thread very helpful. I am blocked though in trying to pass the authorization token to the server during a GraphQL query / mutation. How do you guys handle that?
In my web app, I just use import { MeteorAccountsLink } from 'meteor/apollo'; as part of my ApolloClient constructor, but that option is of course not available in React Native.
I appreciate the help though!