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\[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 (...)


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

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

TanStack•4y ago•

4 replies

urgent-maroon

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


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 (...)


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

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

UseQuery with moralis api

Similar Threads

UseQuery with moralis api

Similar Threads

Similar Threads

Similar Threads