2

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.
Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
Akshatha S R
  • 1,237
  • 1
  • 15
  • 30
  • 2
    Please edit the question to show the callable function that you intended to invoke. Note that your client client is specifically trying to invoke a [callable function](https://firebase.google.com/docs/functions/callable), and it should be defined as such in on the backend. – Doug Stevenson Jun 04 '20 at 06:26
  • I don't think `react-redux-firebase` is meant to replace a requests library like Axios o the Fetch API, and in the end your Cloud Function is an HTTP endpoint. Have you checked if it works using Axios? Also could you share both the functions code and the snippet tha makes the request in the react component? (now the function code seems incomplete) – Happy-Monad Jun 05 '20 at 08:10
  • @Happy-Monad, Thank you. Using Axios I'm able to fetch the data. But I wanted to centralize my data at one point. Thats y I wanted to go with react-redux-firebase. – Akshatha S R Jun 05 '20 at 11:57

2 Answers2

0

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.

Happy-Monad
  • 1,962
  • 1
  • 6
  • 13
0

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.

Brennan
  • 1