CODEWITHSUNDEEP
javascriptreactjsfirebasereduxgoogle-cloud-functions
Steve A
Steve A

Reputation: 17

Third party API call through Firebase Cloud functions ( with Blaze plan). React/Redux

I'm trying to use a Firebase cloud function to make an axios get request to a 3rd party API (Yelp). From what i read so far on related questions, other devs ran into similar issues mostly because they were on the spark plan, or didn't enable cors. I myself am currently on the Blaze plan.

Here is a breakdown of the issue:

-Using: React/Redux

-steps:

1-I wrote a function in my actions file (/actions/index), that makes an axios call to the firebase cloud function

/*actions/index.js*/
import { dbConfig } from "../config/firebase";
import { LOGIN, LOAD_USERS, LOAD_ACTIVITIES, SEARCH_VENUE, RETRIEVEMATCH, SAVE_VENUE } from "./types";
import axios from "axios";


export const searchActivities = (search) => async(dispatch) => {
  /*call to cloud function*/
  axios.get("https://us-central1-we-party-210101.cloudfunctions.net/searchActivities", {headers:{ Authorization: `Bearer ${dbConfig.apiKey}`}})
  .then(res => {
    console.log(" search venue res: ", res.data);
    dispatch({
      type: SEARCH_VENUE,
      payload: res.data
    })
  })
  .catch( e => {
    console.log("searchActivities error: ", e);
  })
}

2-In the cloud function (/functions/index), I enable cors , add my Yelp api token as an authorization header and make the get request.

/*/functions/index.js*/
const functions = require('firebase-functions');
const cors = require('cors')({origin: true});
var axios = require('axios');
var tokens = require('./functionSecrets');

// this function works fine when called the exact same way as the one below
exports.helloWorld = functions.https.onRequest((request, response) => {
  console.log("Hello World");
});

exports.searchActivities = functions.https.onRequest( (request, response) => {
  // enable cors 
  cors(request, response, () => {
    // request to yelp api
    axios.get("https://api.yelp.com/v3/businesses/search", {headers:{ Authorization: `bearer ${tokens.yelpKey}`}})
    .then(r => {
      console.log("Cloud yelp resp", r);
    })
    .catch( e => {
      console.log( "Cloud yelp error: ", e);
    })
  })

})

-desired behavior:

Yelp api response body is logged in my dev tools console. NOTE: I'm not worried about the dispatching in my actions file at this point since I'm not even getting the response in the first place.

-Actual behavior:

The request timesout after taking 6s to run. NOTE: that same request takes about 0.8 s on my local server. Below are the logs in my Firebase functions :

searchActivities Function execution took 60003 ms, finished with status: 'timeout'

I'm fairly new to development in general, and I don't see what I'm missing here. I'm convinced it's a small thing and would love for anyone to point me in the right direction.

Thanks in advance for your help!

P.S: I made sure to go through similar questions, but in case this still ends up being a duplicate, my apologies in advance.

Upvotes: 0

Views: 1735

Answers (1)

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

The searchActivities Function must send a response back to the client to signal the end of its execution.

Otherwise the function executes until the 1 mins default timeout duration leading to a timeout.

You can signal an end of the function execution with: 

response.end()

Or otherwise send an appropriate response.

 cors(request, response, () => {
    // request to yelp api
    axios.get("https://api.yelp.com/v3/businesses/search", {
      headers: { Authorization: `bearer ${tokens.yelpKey}`}
    })
    .then(r => {
      console.log("Cloud yelp resp", r);
      response.send(r.data);
    })
    .catch(e => {
      console.log( "Cloud yelp error: ", e);
      response.sendStatus(500); // ¯\_(ツ)_/¯
    })
  })

Upvotes: 1

Related Questions