Converting Firebase app code to use Fetch API

Question

I'm working through the code in this repository React-powered Hacker News client and would like to modify this to use fetch instead of the Hacker News firebase API specific code that is currently used (as a learning exercise).

This is the code requiring the firebase/app and firebase/database. Before I spend a lot of time on this is it feasible for me (with only basic Javascript/React experience) to update this to use fetch instead of firebase proprietary code?

My understanding is that I could use fetch to retrieve the data i.e. something based on:

fetch('https://hacker-news.firebaseio.com/v0/')
  .then(response => {
    return response.json()
  })
  .then(data => {
    // Work with JSON data here
    console.log(data)
  })

  })

I'm not sure how I would emulate these kind of functions though as they as using firebase.database() code.

function storiesRef(path) {
  return api.child(path)
}

function itemRef(id) {
  return api.child('item/' + id)
}

function userRef(id) {
  return api.child('user/' + id)
}

function updatesRef() {
  return api.child('updates/items')

Assuming your data structure is the same, you should be able to access the data object in the same way; so for your itemRef function: return data.item[id]; As long as you have data returned from your api request from the given endpoint you should be able to reason about it like any typical object. — UncaughtTypeError
– UncaughtTypeError, Commented May 2, 2020 at 16:37
By the way, if you want to query a Firebase DB url, you should append .json to the end of the url (see: firebase.google.com/docs/database/rest/start and firebase.google.com/docs/database/rest/retrieve-data). Although the REST API requires token authentication (see: stackoverflow.com/questions/40520696/…) and is intended to be used directly from the command line or server (at least for full CRUD operations). — UncaughtTypeError
– UncaughtTypeError, Commented May 2, 2020 at 17:04
@UncaughtTypeError Could you put the suggested code in an answer? — nipy
– nipy, Commented May 2, 2020 at 17:42

UncaughtTypeError · Accepted Answer · 2020-05-03 10:14:19Z

1

Assuming your data structure is the same, you should be able to access the data object in the same way; so for your itemRef function: return data.item[id];

function userRef(id) {
   return dataAPI.user[id];
}

var user = userRef('1234567890xxxx');

As long as you have data returned from your api request from the given endpoint you should be able to reason about it like any typical object.

var dataAPI = fetch('https://hacker-news.firebaseio.com/v0.json') // append .json at the end of the url to make a RESTful request
  .then(response => {
    return response.json()
  })
  .then(data => {
    // Work with JSON data here
    return data;
  }, error => {
    console.error('onRejected function called: ' + error.message);
  })


function storiesRef(path) {
  //return api.child(path)
  return dataAPI[path];
}

function itemRef(id) {
  //return api.child('item/' + id)
  return dataAPI.item[id];
}

function userRef(id) {
  //return api.child('user/' + id)
  return dataAPI.user[id];
}

function updatesRef() {
  //return api.child('updates/items')
  return dataAPI.updates.items;
}

Some other notes:

to query a Firebase DB url, append .json to the end of the url (see: firebase.google.com/docs/database/rest/start and firebase.google.com/docs/database/rest/retrieve-data).
the Firebase REST API requires token authentication (see: stackoverflow.com/questions/40520696/how-do-i-access-my-firebase-database-via-http-rest-api).
the Firebase REST API is intended to be used directly from the command line or server (at least for full CRUD operations).

edited May 3, 2020 at 10:14

answered May 2, 2020 at 21:06

UncaughtTypeError

8,8824 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nipy Over a year ago

I get { "error" : "Permission denied" } for hacker-news.firebaseio.com/v0.json. The request would need to be something like hacker-news.firebaseio.com/v0/item/8863.json` The current code uses the firebase api and I would like use fetch if possible but it appears to be a non trivial task to make this work. Thanks.

Collectives™ on Stack Overflow

Converting Firebase app code to use Fetch API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related