Persist data in React Native with Firebase REST API

InstructorTyler McGinnis

Share this video with your friends

Send Tweet

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.

Valentin
~ 9 years ago

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 :-)

Amit
~ 9 years ago

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

Tyler McGinnisinstructor
~ 9 years ago

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/

Amit
~ 9 years ago

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?

Tyler McGinnisinstructor
~ 9 years ago

When you say "reference it" what are you referring to?

re-base does work with React Native :)

Amit
~ 9 years ago

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!

Tyler McGinnisinstructor
~ 9 years ago

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!

Amit
~ 9 years ago

That's exactly what i meant, and thanks Tyler, this is super helpful. Great strategy leveraging authentication, makes perfect sense!

Tyler McGinnisinstructor
~ 9 years ago

Great! Glad I finally got it :) Let me know if you run into any other issues.

Amit
~ 9 years ago

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!

Edgar
~ 8 years ago

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!

Michael Lumbroso
~ 8 years ago

Hey could you update this tutorial now that official support has been announced by Google? Thanks

VNGRS
~ 8 years ago

Tyler your series are incredibly useful but it would be great if you could update the last 3 videos about firebase.

Kushal Mahajan
~ 7 years ago

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