hey @Grid - I hope this isnāt too late for helping you, but this is the solution that I figured out that works for me loading dynamic data in Moralis inspired by @jacob.muchow and @YosephKS. This took me 2 days to figure out but just tested it on my production URL and localhost and works!!
+++
Pass in getServerSideProps
and run the Moralis.Start function first before the actual functional component loads. I just use address
to test, but it should load before anything else, meaning itās working, and then Moralis server is initialized before the site loads
I believe this works because we initialize the Moralis provider before the site loads and then this allows me to directly call the Moralis db in my functional component/page because that is happening 2nd after the Moralis provider loads thanks to getServerSideProps
.
import { Moralis as MoralisDef } from 'moralis/types/node';
import * as MoralisImport from 'moralis/node';
const YourPage = ({ address }) => {
return (
<div>{address} + Your code here</div>
)
}
export async function getServerSideProps(context) {
// const Moralis = require("react-moralis");
const Moralis = MoralisImport as unknown as MoralisDef;
// @ts-ignore
await Moralis.start({
serverUrl: process.env.NEXT_PUBLIC_MORALIS_SERVER_URL,
appId: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
masterKey: process.env.NEXT_PUBLIC_MORALIS_MASTER_KEY
});
const address = '0x...';
return {
props: {
address,
},
};
}