Easypost Node.js Example Difficulties?

Question

I'm currently trying to implement the Easypost API however the example from the docs is console logging null on my front-end (localhost:3000)... does anyone know what I'm doing wrong? Thanks... First time using using firebase as well as easypost & react

functions/index.js:

const functions = require("firebase-functions");
const EasyPost = require("@easypost/api");

const api = new EasyPost(TEST_API_KEYS);

exports.buyShipping = functions.https.onCall((data, res) => {
  const shipment = new api.Shipment({
    from_address: {
      street1: "417 MONTGOMERY ST",
      street2: "FLOOR 5",
      city: "SAN FRANCISCO",
      state: "CA",
      zip: "94104",
      country: "US",
      company: "EasyPost",
      phone: "415-123-4567",
    },
    to_address: {
      name: "Dr. Steve Brule",
      street1: "179 N Harbor Dr",
      city: "Redondo Beach",
      state: "CA",
      zip: "90277",
      country: "US",
      phone: "4155559999",
    },
    parcel: {
      length: 8,
      width: 5,
      height: 5,
      weight: 5,
    },
  });

  shipment.save().then((s) => {
    s.buy(shipment.lowestRate()).then((result) => {
      return result;
    });
  });

  });
});

frontend:

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

///

const app = initializeApp(firebaseConfig);
const functions = getFunctions(app);
const buyShipping = httpsCallable(functions, 'buyShipping')

const buy = async () => {              
       await buyShipping().then((result) => {
          /** @type {any} */
          console.log(result)
    })} 

///

<button onClick={buy}>Purchase</button>

Answer 1

I found the problem; I can't have a return within the shipment.save function in my firebase backend... this worked:

exports.buyShipping = functions.https.onCall((data, res) => {
  const shipment = new api.Shipment({
    from_address: {
      street1: "417 MONTGOMERY ST",
      street2: "FLOOR 5",
      city: "SAN FRANCISCO",
      state: "CA",
      zip: "94104",
      country: "US",
      company: "EasyPost",
      phone: "415-123-4567",
    },
    to_address: {
      name: "Dr. Steve Brule",
      street1: "179 N Harbor Dr",
      city: "Redondo Beach",
      state: "CA",
      zip: "90277",
      country: "US",
      phone: "4155559999",
    },
    parcel: {
      length: 8,
      width: 5,
      height: 5,
      weight: 5,
    },
  });

  const arrayData = shipment.save().then((s) => {
    return s;
  });
  return arrayData;
});

Answer 2

It looks like you are console logging on your backend which won't do anything useful. You'll instead want to return the result of your buyShipping call from the backend so that your frontend can then display it on the page or console log it or whatever you are intending to do with it. Additionally, your two function calls don't share the same name so you aren't actually calling your backend most likely (based on the example provided). buyShipping is the name of the function on the backend but you are calling sendPackage on the frontend.

You'll want all your logic living on your backend Node server and do nothing with it there except return. Then all your "representation" logic (displaying, logging, etc) will happen on the frontend by calling those functions from the backend.