[SOLVED] How to save an Object to the database in React?

Hello!

I’m having a bit of trouble using the Moralis Database Object ā€œ.extend()ā€ method.

I have a React component called ā€œRegisterā€ that registers new users. Inside this component I want to save two different kinds of database objects, a ā€œVendorā€ record and a ā€œOwnerā€ record.

I know that you have to include the useNewMoralisObject() hook, but am having trouble getting it to work properly.

First, I load the hooks from the library:

import { 
    useMoralis, 
    useWeb3ExecuteFunction,
    useNewMoralisObject
} from "react-moralis";

Then inside the component, I load the ā€œsaveā€ function from the hook:

const {save} = useNewMoralisObject("Vendor");

Then I declare a function that will gather input and handle the submission:

const createVendor = () => {

  const Vendor = Moralis.Object.extend("Vendor");
  Moralis.Object.registerSubclass("Vendor", Vendor);

  let newVendor = {
    /*... vendor meta data ... */
  }

  save(newVendor, {
    onSuccess: (savedVendor) => { /* success actions here */},
    onError: (err) => {/* error handling here */ }
  });

}

It worked one time and I can see that entry in the database, but now subsequent calls to make a new entry in the Moralis Database fail, and I’m not sure why, or even if I’m doing this right? I also want the ability to save another related record under a different ā€œclass nameā€ (Owner), but I’m not sure how to do that?

Can someone give me a bump in the right direction? I would appreciate any guidance.

Thanks in advance!

What is the error you get? Check your browser console and network tab.

I also want the ability to save another related record under a different ā€œclass nameā€ (Owner), but I’m not sure how to do that?

You can use two instances of the same hook and reference with different names e.g. saveVendor:

const {save: saveVendor} = useNewMoralisObject("Vendor");
const {save: saveOwner} = useNewMoralisObject("Owner");
1 Like

You can use two instances of the same hook and reference with different names e.g. saveVendor:

const {save: saveVendor} = useNewMoralisObject("Vendor");
const {save: saveOwner} = useNewMoralisObject("Owner");

^ Thanks for this, I didn’t know the syntax, now I do.

The error object just comes back blank / undefined, and there are no exceptions being thrown in the console, but it is erroring out – the ā€œonError()ā€ function is being triggered…?

Am I doing something wrong with how I extend Moralis.Object?

Can you try updating your server and a different class with some test values to see if you can save repeatedly. And you can save a valid object directly, your extend isn’t used.

createVendor() {
    save(newVendor,
      { onSuccess: (savedVendor) => console.log(savedVendor) } // etc.
    );
  }

I updated my Moralis SDK just to make sure, then I noticed I made a mistake in my error handling function I was doing:

alert("error: ", JSON.stringify(error));

When I changed that to :

alert("error: " + JSON.stringify(error));

It finally spit out an error message:

error: {"message":"schema mismatch for Vendor.supportedLanguages; expected Array but got String","code":111}

Which is a helpful error message! The database was rejecting the call because of a type mismatch on one of the elements of the record. I’m reworking the code right now to see if this solves the issue.

Thanks so much for your willingness to help me out!

(edit: the mismatched types on the record were the issue, I fixed that and now I can make multiple records and I confirmed they show up in the database)

1 Like