[SOLVED] How to use moralis api with useQuery?

Moralis General
#1

Hi everyone,

I’m trying to fetch some data with moralis in my next.js app, using useQuery, and I can’t achieve this :confused:

Maybe because I’m using a hook in an async function I don’t know, but the moralis.start() really bother me here :confused:

What I’m doing wrong plz ? What is the right way to do this ?

My code below returns an error :
error - unhandledRejection: TypeError: Cannot read properties of null (reading 'useContext') at Module.useContext (C:\dev\build-your-soul\glimmers-of-hope\glmrzWebsite-next-js-version\node_modules\.pnpm\[email protected]\node_modules\react\cjs\react.development.js:1618:21) at useQueryClient (file:///C:/dev/build-your-soul/glimmers-of-hope/glmrzWebsite-next-js-version/node_modules/.pnpm/@[email protected]_5qh23tcr3iha6376fuaqv4s6zm/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:31:77) at useBaseQuery (...)

import { useQuery } from "@tanstack/react-query";
import Moralis from "moralis";
import { EvmChain } from "@moralisweb3/evm-utils";

export async function getWalletNFTs() {
  const chain = EvmChain.GOERLI;
  const address = "0x19D67dBE3018E2565A7b17Fe7F673770BC95a3FF";

  await Moralis.start({ apiKey: process.env.NEXT_PUBLIC_MORALIS_RPC_KEY });
  const { data } = useQuery([address], () =>
    Moralis.EvmApi.nft.getWalletNFTs({
      address,
      chain,
    })
  );
  console.log(data);
  return data;
}

export default function Home() {
  getWalletNFTs();
  return <div>hello</div>;
}

My _app.js

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export default function App({ Component, pageProps }) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}
#2

You can only use useQuery (which is a hook) in a function component (like Home) or another hook. You can read Rules of Hooks.

You can do something like:

export async function getWalletNFTs() {
  const chain = EvmChain.GOERLI;
  const address = '0x19D67dBE3018E2565A7b17Fe7F673770BC95a3FF';

  await Moralis.start({ apiKey: process.env.NEXT_PUBLIC_MORALIS_RPC_KEY });
  const response = await Moralis.EvmApi.nft.getWalletNFTs({
    address,
    chain,
  })

  return response.toJSON();
}

export default function Home() {
  const { data } = useQuery(['key'], getWalletNFTs);

 useEffect(() => {
    console.log('useQuery data', data);
  }, [data]);

  return <div>hello</div>;
}
#3

Keep in mind as well that Moralis v2 SDK is only usable in the backend :raised_hands:

#4

thx all !

I’m using this pattern, it works :

import { useQuery } from "@tanstack/react-query";
import Moralis from "moralis";
import { EvmChain } from "@moralisweb3/evm-utils";

const chain = EvmChain.GOERLI;
const address = "0x19D67dBE3018E2565A7b17Fe7F673770BC95a3FF";
Moralis.start({ apiKey: process.env.NEXT_PUBLIC_MORALIS_RPC_KEY });

// or rename it useWalletNFTs
function getWalletNFTs() {
  const { data } = useQuery([address], () =>
    Moralis.EvmApi.nft.getWalletNFTs({
      address,
      chain,
    })
  );
  console.log(data);
}

export default function Home() {
  getWalletNFTs();
  return <div>hello</div>;
}
1 Like