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…


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");


const app = express();

  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) {

    this.state = {
      debts: {}

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

  componentDidMount = () => {

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

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

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

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

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



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

Thank you