absent-sapphire

UseQuery with moralis api

Hi everyone, I'm trying to fetch some data with moralis in my next.js app, using useQuery, and I can't achieve this 😕 Maybe because I'm using a hook in an async function I don't know, but the moralis.start() really bother me here :/ 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\react@18.2.0\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/@tanstack+react-query@4.13.0_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>;
}

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>
  );
}

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>
  );
}

3 Replies

harsh-harlequin•4y ago

Hi you could rename your async getWalletNFTs function to make it be a hook and avoid the warning from the rule of hooks. useGetWalletNFTs.

absent-sapphireOP•4y ago

Erf i've pasted the wrong part :/ I've updated the message with the error message thx for your answer anyway 🙂

other-emerald•4y ago

You still cannot use a hook (useQuery) in an async function...

Gaming

Programming

UseQuery with moralis api

Did you find this page helpful?