2

I'm a beginner learning more about react and mongoDB and I'm having some trouble communicating between the two. I've been following a tutorial on Medium on using the Plaid API to grab historical transaction data from users (here's the tutorial codebase used). While the users bank accounts and user profile information is stored in the mongoDB backend, the transaction data is not. Instead, an API call is made each time a user lands on certain page and the transaction data is turned into an array which is shown in a data table on the front end to the user.

This is found on line 56 of the Accounts.js file in the tutorial codebase linked above (file located in this dir: client\src\components\dashboard)

// Setting up data table
    const transactionsColumns = [
      { title: "Account", field: "account" },
      { title: "Date", field: "date", type: "date", defaultSort: "desc" },
      { title: "Name", field: "name" },
      { title: "Amount", field: "amount" },
      { title: "Category", field: "category" }
    ];
let transactionsData = [];
    transactions.forEach(function(account) {
      account.transactions.forEach(function(transaction) {
        transactionsData.push({
          account: account.accountName,
          date: transaction.date,
          category: transaction.category[0],
          name: transaction.name,
          amount: transaction.amount
        });
      });
    });

What I would like to do instead is post this array to the mongoDB I have connected- otherwise I would never be able to see any of the transaction data that a user pulls in. What I think I should do to accomplish this is create a new js file in models called Transactions.js. Currently in the models folder (in parent dir) there is an Account.js file and a User.js file which set up the schema for each of these respective datasets. I'm thinking Transactions.js would look like this (which would line up with the array format posted above):

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

const TransactionSchema = new Schema({
  userId: {
    type: Schema.Types.ObjectId, // how we associate each transaction with a user
    ref: "users"
  },
  accessToken: {
    type: String,
    required: true
  },
  itemId: {
    type: String,
    required: true
  },
  account: {
    type: String
  },
  date: {
    type: Date
  },
  name: {
    type: String
  },
  amount: {
    type: String
  },
  category: {
    type: String
  },
});

module.exports = Transaction = mongoose.model("transaction", TransactionSchema);

But from there I am unsure to proceed on how to post the transactionsData array into this schema. Ideally, I would like it to post each time a user hits the API and only add items to the TransactionSchema if they don't already exist.

A related question I have is what is the most efficient way to render specific data to a user on the front end when calling data from mongoDB? For example, the same Accounts.js file referenced above contains this on line 76:

<b>Welcome, {user.name.split(" ")[0]}</b>

What this does is it grabs the users full name that was entered during sign up and then converts it to first name. It seems to me that this is referencing the User.js file that is in models and the queries the name field. When i change this to another field that is in User.js however (such as email) and use the same code convention {user.email} I do not see any results come through.

Thank you for the help!

wharfchillin
  • 201
  • 3
  • 11

1 Answers1

1

you can do something like this

let Transaction = require("./model/Transaction.js") // whatever file your transaction schema is stored in


// do this is in the same place you create the transactionData from the transactionData array
transactionData.foreach(async data => {
    const newTransaction = new Transaction(data)
    await newTransaction.save()
})

this will create a new Instance of the Transaction schema for every transaction in your transactionData array and save it the database

david snyder
  • 337
  • 3
  • 16
  • Hmm I continue to get this error: `Module not found: Can't resolve '../../models/Transaction.js' in 'mern-plaid\client\src\components\dashboard'` which seems to be the most useless error message ever. Does it make sense that I just essentially just pasted the two items you referenced directly after the `let TransactionsData = []` code block in my original post? I did update the first line you sent to be this `let Transaction = require("../../models/Transaction.js");` which I think should work (but I tried yours as well). – wharfchillin Mar 02 '20 at 21:47
  • you were right to modify the path in the require, my best guess as to why it isn't finding the file is you got the relative wrong somewhere – david snyder Mar 02 '20 at 22:02
  • hey David- thanks for the response. how would you recommend best troubleshooting this issue? i'm using the exact same folder structure as the codebase linked in my original post – wharfchillin Mar 04 '20 at 04:00
  • I'm still struggling referring to this file. I think the appropriate reference is actually `let Transaction = require("../../../models/Transaction.js");` because the file is up three folders however that gives me an error that it is outside of the src directory. A potential alternative could be to add your code to the plaid.js file instead which is in the parent dir. Here is a link to the exact file https://github.com/rishipr/mern-plaid/blob/master/routes/api/plaid.js and I believe it would best be suited around line 131 (right after the transactions API call is sent to JSON) – wharfchillin Mar 04 '20 at 23:17
  • I just realized the issue. you should either run the code I gave you in some backend code or move the `Transaction.js` file into the src folder because react doesn't like to import modules from outside of the src folder – david snyder Mar 05 '20 at 02:42
  • Hmm tried this but was having some issues on this front as well. I moved it into the src folder and fixed the relative path but still had issues. One thing I noticed is that the Transactions schema doesnt show up in the mongo backend even in if I remove your code block where I write to it. This may be a silly question, but if I add a new schema to the models folder, shouldn't I at least see the schema show up even if nothing has been written to it yet? – wharfchillin Mar 07 '20 at 18:56
  • I am not sure if you see anything in MongoDB if you haven't to it yet. are you using a rest client that you could use to send some artificial data to the database? – david snyder Mar 08 '20 at 01:36
  • I'll try and give that a go. Thanks a ton David for sticking with me for so long lol – wharfchillin Mar 09 '20 at 22:05