How to use Moralis.Config with React

Moralis General
#1

I try to access to the config object from Moralis as documented here:
https://docs.moralis.io/cloud-functions#config

import { Moralis } from 'moralis';

export let HOST;

(async () => {
  const config = await Moralis.Config.get({ useMasterKey: false });
  HOST = process.env.REACT_APP_HOST || config.get('HOST') || 'http://localhost:3001';
})();

Unfortunately, React returns the following stack trace:

Storage.js:138 Uncaught (in promise) Error: You need to call Parse.initialize before using Parse.
    at Object.generatePath (Storage.js:138)
    at Object.currentInstallationId (InstallationController.js:31)
    at Object.request (RESTController.js:388)
    at Object.get (ParseConfig.js:258)
    at Function.value (ParseConfig.js:148)
    at environment.js:8
    at Module.<anonymous> (environment.js:11)
    at Module../src/environment.js (environment.js:12)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (CreateGatheringButton.js:55)
    at Module../src/components/EditGathering.js (EditGathering.js:63)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (App.css?dde5:82)
    at Module../src/App.js (App.js:120)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Module.<anonymous> (environment.js:12)
    at Module../src/index.js (index.js:24)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Any idea what I am doing wrong?

#2

Hi akira,

Looks like you may have forgot to initialize the Moralis SDK with the server url and app id. These can be found on the server by pressing the “View Details” button on your server instance.

Moralis.initialize("YOUR APP ID HERE");
Moralis.serverURL = "YOUR SERVER URL HERE";

I can confirm this feature is working:

image
image1620×511 47.4 KB

#3

Yes correct! Thanks @mayjer

I added Moralis.initialize(); (without arguments for some reason) to make it work.

Suggestion: would it be a good idea to provide a hook useMoralisConfig() to React Moralis?

#4

Note, if you’re using React (somehow I didn’t clue in before because your code snippet didn’t look like React) then the framework will initialize the SDK for you, you just need to pass the server url and app id to the provider component

From the readme:

import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";

ReactDOM.render(
  <MoralisProvider appId="xxxxxxxx" serverUrl="xxxxxxxx">
    <App />
  </MoralisProvider>,
  document.getElementById("root"),
);

A hook for the Config is probably a good idea.

1 Like
#5

It’s possible that this happens because the await Moralis.Config.get gets called before Moralis is initialized. What you can do is to use an useEffect hook inside your app, and check when isInitialized is set to true. And then call your function.

Something along the lines like:

const { isInitialized } = useMoralis();

useEffect(() => {
  if(isInitialized){
   // your code
  }
}, [isInitialized])

I agree that a hook for this in the library is a nice addition. We’ll add it to the list, thanks for the feedback :smiley:

1 Like
#6

Yup, thanks for your replies.

I could contribute and add this hook, but it will be faster if you do it probably…

PS: @Erno I published a pull request on react-moralis a few days ago https://github.com/MoralisWeb3/react-moralis/pull/1

1 Like