Attempt to render MongoDB entries in React front-end timing out after 10 seconds

JavaScript
1

Hi - I’ve come here after no success with Stack Overflow… :sweat:

Hope it’s in the right section!

I’m attempting to render a component with props passed in as entries from my MongoDB database. To do this, I’m using Serverless Functions hosted on Vercel.

I can successfully post the entries to my database with no problem, however I can’t then render the entries in my dashboard. I get a timeout error after 10 seconds:

[GET] /api/fetchDebtCards
09:54:52:69
2020-10-13T08:55:02.792Z bad0eafa-7006-4749-886a-ba9842dd72a7 Task timed out after 10.01 seconds

I’ve tried playing around with the code, but just can’t figure out what I’m doing wrong.

Here’s my code -

My Schema being pulled:

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’ function pulled from API -> fetchDebtCards.js :

const mongoose = require("mongoose");
const SubmitDebt = require("./submitDebtSchema");

require("dotenv").config();

mongoose.connect(process.env.MONGO_URI)


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

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

  await SubmitDebt.find({});
};

My React front-end, attempting to pull and render the cards:

import React, { Component } from 'react';
import axios from 'axios';
import './individual-debts.css';
import IndividualDebtCard from '../individual-debts/individual-debt-card';

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

    this.state = {
      debts: []
    }

  }

  componentDidMount() {
    axios.get("/api/fetchDebtCards")
      .then(({
        response, data }) => {
        this.setState({
          debts: response.data
        })
      .catch(e => {
        console.log(e)
      })
    })
  }

  render() {

    const fetchDebts = this.state.debts.map (debt => {
      return (

       <IndividualDebtCard key={debt._id}
        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} />
    )
    })

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

              { fetchDebts }

            </div>

I feel like it’s something really obvious I’m doing wrong. I’ve been scratching my head about this for a couple of days now. I don’t know if it’s perhaps related to it being a serverless function, or possibly the fact I’m importing the component and attempting to use the data as props? I really can’t figure it out :frowning:

Any help would be really really really appreciated. Thank you.

2

In your fetch function, you’re never sending the response. Nor are you doing anything with the MongoDB result. Try this:

module.exports = async (req, res) => {
  const submitDebts = await SubmitDebt.find({});
  return res.status(200).json(submitDebts);
};
1 Like
3

Hey! Thank you for the response.

I’ve tried this and unfortunately it’s still not working, however… The time-out error seems to have stopped now.

So I’m assuming there were multiple problems which didn’t show up in the error log.

Do you have any other suggestions?

Really appreciate your response, thank you!

4

Ok, debugging further. Looking at your frontend code, the parameter destructuring of the response is incorrect. Axios returns one response object with the data property inside it https://github.com/axios/axios#response-schema.

Also the syntax isn’t correct, you’re missing a }) before .catch. Try this:

axios.get("/api/fetchDebtCards")
  .then((response) => {
    this.setState({ debts: response.data })
  })
  .catch(e => {
    console.log(e)
  })
})

Open up the console (Option + CMD +J in Chrome) in your browser and read the errors. The clues to solving many issues are in there.

1 Like
5

Thank you - it’s working!! Hopefully one day I’ll get to the level to be able to do stuff like this myself.

Really, really appreciate the help. Have a great day!

1 Like
6

Glad it worked! :hugs:

Don’t worry, you’ll get there eventually. Every developer has been through this stage in the beginning. Keep moving forward.

Enjoy your day and happy coding!