I am getting the following error when trying to query the list of NFTS from the collection:
Error: Web3Api not initialized, run Moralis.start() first
I am using NestJS.
My NFT Collection component
import Head from "next/head";
import { NFTGrid } from "../components";
import { Moralis } from "moralis";
import {
useMoralis,
useMoralisWeb3Api,
useMoralisWeb3ApiCall,
} from "react-moralis";
function collection() {
const contractAddress = "0xba5608385cd6b76eb5c4d8a88d6f427df919e834";
const { Moralis, isInitialized } = useMoralis();
const Web3Api = useMoralisWeb3Api();
const options = {
address: contractAddress,
chain: "rinkeby",
};
const { fetch, data, error, isLoading } = useMoralisWeb3ApiCall(
Web3Api.token.getAllTokenIds(options)
);
console.log(data);
return (
<>
<Head>
</Head>
<main>
<button onClick={() => fetch()}>Refetch</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
{/* <NFTGrid nfts={nfts} /> */}
</main>
</>
);
}
export default collection;
My _app.js
import { useEffect } from "react";
import { Layout } from "../components";
import AOS from "aos";
import "aos/dist/aos.css";
import { useRouter } from "next/router";
import * as ga from "../lib/ga";
import { MoralisProvider } from "react-moralis";
import { SSRProvider } from "@react-aria/ssr";
function MyApp({ Component, pageProps }) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
ga.pageview(url);
};
//When the component is mounted, subscribe to router changes
//and log those page views
router.events.on("routeChangeComplete", handleRouteChange);
// If the component is unmounted, unsubscribe
// from the event with the `off` method
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
useEffect(() => {
// here you can add your aos options
AOS.init({
offset: 100,
once: true,
});
}, []);
return (
<>
<SSRProvider>
{typeof window !== "undefined" && (
<MoralisProvider
appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}
>
<Layout>
<Component {...pageProps} />
</Layout>
</MoralisProvider>
)}
</SSRProvider>
</>
);
}
export default MyApp;