10

I'm trying to work out how to call firebase functions from within a react component.

React component...

import React from 'react';
import './App.css';
import functions from '../functions/index'

function App() {

    const callFirebaseFunction = event =>{
        var output = functions.returnMessage()
        console.log(output)
    }

    return(
        <div>
            <button onClick={event => callFirebaseFunction()}>call function button</button>
        </div>    
    )

firebase functions index.js...

const functions = require('firebase-functions');

exports.returnMessage = functions.https.onCall((data, context) => {
    return {
        output: "the firebase function has been run"
      }
});

Hopefully my code explains what i'm trying to do. Feel free to correct any other mistakes that i'm making in this very simple example.

The issue that i'm having is that I can't import anything to the component that isn't within the src folder and the firebase functions falls outside of this. I don't really want to eject anything as i'm assuming that there is a proper way for me to access my firebase functions and I simply can't find it.

Thomas Fox
  • 521
  • 2
  • 5
  • 16
  • why don't you just move your code into `src`? – azium Nov 16 '19 at 22:18
  • Firebase complains about me doing that for some reason. I tried it briefly and had a couple of different issues although I can't remember what they were. I'll run it like that again to find out what the issues were. – Thomas Fox Nov 16 '19 at 22:22
  • I'm guessing your react application was made using `create-react-app`? There shouldn't be any issues with you writing all your code inside the `src` folder unless maybe you are also writing some server side code. please update your question with errors relating to that – azium Nov 16 '19 at 22:24
  • Yes you're correct. Do the firebase functions count as serverside code?. I'll add some errors in in a few minutes. – Thomas Fox Nov 16 '19 at 22:26
  • Oh I just looked it up, yeah it's 100% a nodejs thing. You can't import those functions into your react application, that makes 0 sense. Even if you could it wouldn't do anything.. what are you actually trying to do? – azium Nov 16 '19 at 22:29
  • Right so do I need to do a http request to the firebase functions file? If so how do I go about that. Can I use axios? I'm basically trying to work out how to run the firebase functions and pass them data when I hit a button. – Thomas Fox Nov 16 '19 at 22:33
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202485/discussion-between-azium-and-thomas-fox). – azium Nov 16 '19 at 22:34

3 Answers3

11

Per the documentation you need to use the firebase library in the client side to make the call to the callable function. You shouldn't be importing the server-side functions code, that needs to be deployed to firebase functions on its own -- it is not reused in the client side of the app.

Assuming you have properly imported the firebase client SDK into your client code, this means we can modify callFirebaseFunction like so:

const callFirebaseFunction = event => {
    const callableReturnMessage = firebase.functions().httpsCallable('returnMessage');

    callableReturnMessage().then((result) => {
      console.log(result.data.output);
    }).catch((error) => {
      console.log(`error: ${JSON.stringify(error)}`);
    });
}

Note: Due to when this question was originally asked and the firebase version it used, this answer uses the "Web version 8 (namespaced)" method of calling style. Since then, there is also a "Web Version 9 (modular)" style (at the documentation link) that may be more appropriate. (See this answer).

robsiemb
  • 6,157
  • 7
  • 32
  • 46
4

With the release of the modern Firebase SDK, the documentation linked in the accepted answer has been updated. This means the code should now be:

import { getFunctions, httpsCallable } from "firebase/functions";

const callFirebaseFunction = event => {
    const functions = getFunctions();
    const callableReturnMessage = httpsCallable(functions, 'returnMessage');

    callableReturnMessage().then((result) => {
      console.log(result.data.output);
    }).catch((error) => {
      console.log(`error: ${JSON.stringify(error)}`);
    });
}
samthecodingman
  • 23,122
  • 4
  • 30
  • 54
Castello Developer
  • 41
  • 3
  • RE: Your edit on the current accepted answer, have a read of [this Meta.SO thread](https://meta.stackoverflow.com/q/308607/3068190). If you are going to update for newer versions, leave the original answer as-is and add a new "updated for X" section, or do as you have here and add another answer. – samthecodingman Jan 13 '23 at 08:33
2

I just updated the firebase from ^4.8.0 to ^7.21.0

And now i am able to use httpsCallable

Vishal Chavan
  • 334
  • 3
  • 3