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

Moralis General
#1

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!

#2

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
#3

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?

#4

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.
    );
  }
#5

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