Persist data in React Native with Firebase REST API
For our demo React Native application, we want to persist some notes about Github users. To make that quick and easy, we are going to take advantage of FireBase's REST API to have data persistence in minutes.
[00:00] In order to persist data, we are going to use firebase. If you're following along, go over to firebase.com and sign up for an account. Once you do that, you will be taking to this dashboard page. You can go ahead here and create a new app, so we can just call it GitHub saver.
[00:17] If I create this new app, I can go to it, and I notice firebase will give me this URL.
[00:23] Firebase is known for their two-way data binding with angular, and also their web socket-y stuff were everything is up-to-date, and it's really, really convenient.
[00:31] The bad thing about that is with react native it doesn't support website, so we are going to use firebase as restful API, which is still really, really convenient.
[00:41] Let's head over to our API file with me earlier, and we are going to create two units. The first one is going to be called GetNotes. What it's going to do is, it's going to accept a username, trim it up a bit.
[00:58] Once we do that, our URL is going to be the firebase URL that we got from firebase, and then we're going to append to it the username we got that was passed and when we invoke to the function, as well as .JSON on the end.
[01:16] Then what we can do is, we're going to use Fetch again. We're going to fetch data from that URL, hold that there, get a response, and then return another promise, which is parsing our jSON. It looks very similar, that's because it's pretty much the same as the repository get we made earlier.
[01:39] The last one we are going to make is called AddNote. This will allow us to add a new note up to firebase, so we're going to take in a username, and we're going to take in a note. Then we're going to clean our username up.
[01:54] After that, what we'll do is let's make another URL, it's going to be very similar to this one. Then what we're going to do is make a post request with Fetch.
[02:04] What's nice about Fetch is API, it's almost the exact same thing. We're going to pass on a URL now, we are also going to pass in the subject as the second argument. The method is going to be post. The body of that post request is going to be, we're going to stringify the note.
[02:25] Then as always, Fetch will return us a promise, which we can add that on to. Then we're going to return the response.JSON. There we go. There's our way we make post requests through firebase, and there's our way we'll make get requests to firebase.
[02:44] Now, whenever we invoke these methods, we'll either get the data that's stored at this firebase location, or we'll add a new item to that database.
[02:54] The biggest thing to remember here is that when you have your URL, the URL is the exact same URL you got from firebase. We're appending a username to it, so what we'll eventually see is something like this, where we will have the username, and then the value will be some note.
[03:13] Now, notice if I go to this URL, githubsaver.com/TylerMcGuinness, you can see all of Tyler McGuinness' notes. So, firebase is really, really convenient and if you want to use the rest API all you can do is append .JSON on the end of it.
Hey Tyler,
Thanks for this and your other videos on Egghead, you do a fantastic job.
Do you know if there is a way to access the unique id's that Firebase creates on POST requests when using just the REST API, or do you need to install their package (and eventually rebase like you do in your other video)?
Amit
Hi Amit, thanks for the kind words! The response that Firebase gives you should contain that unique ID. See here. https://www.firebase.com/docs/rest/api/
Thanks for the quick reply Tyler!
Yes, i see the unique id, just don't know how to reference it without the .key() method that the firebase package gives (since we didn't install it here just using the REST API). Maybe i'm missing something?
Also was wondering if re-base (which looks like it would solve my problems!) works with React Native?
When you say "reference it" what are you referring to?
re-base does work with React Native :)
Hey Tyler,
What i mean is, when you write to firebase, either with post or push, as opposed to put or set, the firebase endpoint created is a new unique id that then holds your data. How do you reference that unique id? The only way I could see was using dataSnapshot.key(), which you can't do just using the REST API.
Interestingly, i switched over to re-base and not sure how to do that with re-base either. The .post method just writes to an existing endpoint, but how do you create a unique id key at a new endpoint that then holds your data?
Sorry to inundate you with questions here by the way!
Ah sorry I miss understood your question. To verify what I believe your question is, you're asking that when Firebase makes those unique ids for you, how do you effectively manage (or in your words reference) those in the future to retrieve your data?
Currently with Rebase there is no way to create a new random ID (see this issue https://github.com/tylermcginnis/re-base/issues/37).
The strategy I usually take is a combination of caching and a intelligent Firebase schema.
For example, it's a necessity to have the user's unique ID (that was created when I did a .push to my /users endpoint) throughout the session of that user. Firebase doesn't give me this unique ID when a user logs in because I created that with a .push to /users when they registered. But what Firebase does give me is another token that is specific to that user. So when a user is created a update a custom /userIdLookup endpoint in firebase that as they key contains the id I get from Firebase and as a value contains the unique ID I got when I pushed to /users. So it looks something like this
/userIdLookup Id-I-Get-When-I-Log-In: Real-Id-I-Use-To-Identify-User
thenI query /userIdLookup/Id-I-Get-When-I-Log-In get the response of Real-Id-I-Use-To-Identify-User then I save Real-Id-I-Use-To-Identify-User into local storage and query localstorage whenever I need the ID of that user.
Hope this helps!
That's exactly what i meant, and thanks Tyler, this is super helpful. Great strategy leveraging authentication, makes perfect sense!
Great! Glad I finally got it :) Let me know if you run into any other issues.
Hey Tyler,
After taking more time and trying to refactor my data requirements, ran into another question for you. I'm running into the same issues you did of considering flux or redux with Firebase, doesn't make much sense. That said, i'm trying to slim down my data requirements so they only rely on rebase, while using the firebase npm package only for creating records that need unique ids generated.
With that in mind, i'm still ending up nesting api calls, and in your tutorial you do that specifically with notes, where after a note is added you make an api call to get all notes again before setting the state. My question is, if rebase is binding the firebase endpoints to your state, then shouldn't the change at the endpoint just trigger a change in state which triggers a re-render? Why is it necessary to get the updated notes list in order to display them?
Thanks!
Websockets are not supported for react native according to this blog post on their website!
https://firebase.googleblog.com/2015/05/firebase-now-works-with-react-native_40.html
However the comments dating as far back as a month ago say that it's only true for versions before Firebase-3.
One user confirmed it works for him using: "firebase" : "^2.4.2"
I'm working on confirming it now as well!
Hey could you update this tutorial now that official support has been announced by Google? Thanks
Tyler your series are incredibly useful but it would be great if you could update the last 3 videos about firebase.
Thanks for the tutorial. Pretty much done building app except the notes component.
When I try accessing https://reactnative-2273f.firebaseio.com/tylermcginnis.json it gives me a permission denied output. Do I need to add any any authorization headers ?
Yes, I registered my appname as reactNative
Hi,
I updated the Notes.js file so it contains the latest bugfixes, but I still get an error when I want to open the Notes View.
Requested keys of a value that is not an object. Notes.js:53
Would be great if you could guide me to the solution :-)