Unable to fetch MongoDB data to React frontend

I want to render a ‘card’ with certain details pulled from a MongoDB database, and passed in as props to a React front-end. The back-end is a serverless function.

Currently, I can’t get my React code to find my MongoDB entries. It keeps timing out with the below error message:

2020-10-12T15:25:11.119Z    cde99f57-0da2-4b71-9fc1-d2eda3c1369c    ERROR   (node:8) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
2020-10-12T15:25:21.062Z cde99f57-0da2-4b71-9fc1-d2eda3c1369c Task timed out after 10.01 seconds

This happens after every single reload of the page - the request keeps timing out.

Can anyone point out what I’m doing wrong here?

Here’s my code…

Schema:

const mongoose = require("mongoose");
const Schema = mongoose.Schema;


const SubmitDebtSchema = new Schema ({
  creditCard: String,
  personalLoan: String,
  provider: String,
  balance: Number,
  limit: Number,
  monthly: Number,
  interest: Number,
  borrowed: Number
});

module.exports = mongoose.model('submitdebts', SubmitDebtSchema);

My ‘fetch’ API function:

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const SubmitDebt = require("./submitDebtSchema");

require("dotenv").config();

const app = express();

app.use(bodyParser.urlencoded({
  extended: true
}));

mongoose.connect(`mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@otter-money.f9twk.mongodb.net/test?retryWrites=true&w=majority`, {useNewUrlParser: true, useUnifiedTopology: true});


module.exports = async (req, res) => {

  res.statusCode = 200;
  res.setHeader("Content-Type", "application/json");

  await SubmitDebt.find({});
};

My React code:

class IndividualDebts extends Component {
  constructor(props) {
    super(props)

    this.state = {
      debts: {}
    }

    this.getDebtCards = this.getDebtCards.bind(this);
    this.renderDebtCards = this.renderDebtCards.bind(this);
  }

  componentDidMount = () => {
    this.getDebtCards()
  }

  getDebtCards = () => {
    axios.get("/api/fetchDebtCards")
      .then((res) => {
      const data = res.data
      this.setState ({
        debts: data
      })
      console.log("Data has been received.")
    })
    .catch((error) => {
      alert("Error fetching the data.")
      console.log(error)
    })
  }

  renderDebtCards = (debts) => {
    if (!this.state.debts.length) {
      return null
    }

    this.state.debts.map((debt, index) => {
      return (
        <div>
        <IndividualDebtCard key={index}
          provider={debt.provider}
          type={debt.creditCard === 'true' ? debt.creditCard : "Personal Loan" }
          balance={debt.balance}
          limit={debt.creditCard === 'true' ? debt.limit : debt.borrowed}
          monthly={debt.monthly}
          interest={debt.interest} />
        </div>
      )
    })
  }


  render() {
    return (
      <div>
        <section className="individual-debts-section">
          <div className="individual-debts-container">
            <div className="individual-debts-heading">
              <h3>Individual Breakdown</h3>
            </div>

            <div className="individual-debts-card-container">

              {this.renderDebtCards()}

            </div>

I feel like it’s really close, but I just can’t figure out what I’m doing wrong!! Any tips?

Thank you