Using react-redux-firebase to comsume cloud functions - React JS

user_2629813 0
Viewed 614

I'm new to React JS. I'm trying to develop one simple web page which renders data from cloud firestore. And I'm using react-redux-firebase to fetch the data. It is working fine. Now I want the data to be fetched from cloud functions. I have deployed the cloud functions successfully. And I can even fetch the data from cloud functions using axios. But I want to use react-redux-firebase. I searched a lot and couldn't find a single example. Please help me.

const firebase = getFirebase();

    var animals = firebase
        .functions()
        .httpsCallable("getAllAnimals");
    animals()
        .then(result => {
            console.log("result ------------- ", result)
        })
        .catch(error => console.log('errorrrrrrrr ' + error)
        );

Using this, I'm getting the below error.

errorrrrrrrr Error: Response is missing data field.
react-redux-firebase google-cloud-functions redux firebase reactjs
2 Answers

I think two different things are mixed up here, the library react-reduc-firebase and centralizing state.

As you said in the comments you're able to query the HTTP Cloud function with a request library such as Axios though I understand you want to also query the Cloud Function through the react-redux-firebase. However the library is not intended for querying arbitrary HTTP endpoints, such as this function or any other HTTP reachable API. Instead the library is meant to be a comfortable and out-of-the-box interface to seamlessly interact with products that have their own JS client libraries and API which would otherwise require you to write all the glue code yourself. The reason why you cannot find Cloud Functions in the Github's feature list it's probably because there is no special treatment needed to reach them, thus no interface layer is provided.

Separately, I understand you want to centralize your data in the spirit of a Redux (Flux) application architecture. IMO the fact that you use both Axios and Firestore does not conflict with the principle of centralized state management which is agnostic about how data is obtained as long as it's changes and management align with Redux core principles. It makes sense that not all your information is accessible with a single procedure when each database has their specifics quircks.

user_124153390

In case anyone else is trying to use cloud functions with react-redux-firebase, it is possible if configured possibly.

In your main app's index.js file, where you configure firebase for the ReactReduxFirebaseProvider, be sure to also import firebase/functions.

// src/index.js
import firebase from 'firebase/app';
import 'firebase/functions';

This will allow you to use firebase.functions() in conjunction with the useFirebase() hook.

user_111885840
Related