Using connected wallet to fetch all NFTs using alchemy sdk

Question

I'm trying to pass the user's connected wallet into getNftsForOwner function but am not sure how to do it. If I type out the address into the function like this:

const NFTs = await alchemy.nft.getNftsForOwner('0x00000111');

Everything works just fine but if I try passing the connected wallet, it returns error 400: no wallet address.

import { useRouter } from "next/router";
import { alchemy } from "const/alchemy";
import { useEffect, useState } from "react";
import { OwnedNftsResponse } from "alchemy-sdk";
import { useAddress } from "@thirdweb-dev/react";



const BagGrabber: NextPage = () => {
    const router = useRouter();
    const { walletAddress } = router.query;
    const [NFTs, setNFTs] = useState<OwnedNftsResponse>()
    const address = useAddress(); //also tried passing this hook, maybe in useEffect?
  
 


 useEffect( () => {
    async function grabber() {
        const NFTs = await alchemy.nft.getNftsForOwner(walletAddress as string);
      setNFTs(NFTs);
    }
    grabber();
  }, [NFTs]);

Maybe I need to format the address in useEffect useState? I don't know? The owner address needs to be a string.

Answer 1

Got it working only thing is that it continuously calls the api while page is actively being viewed. So that can get costly if not fixed. For some reason the wallet address has to be called owner for alchemy to accept it. If anyone knows how to fix that issue? please tell.

import { alchemy } from "const/alchemy";
import { useEffect, useState } from "react";
import { OwnedNftsResponse } from "alchemy-sdk";
import { useAddress } from "@thirdweb-dev/react";



const BagGrabber: NextPage = () => {
    const [NFTs, setNFTs] = useState<OwnedNftsResponse>()
    const owner = useAddress()



 useEffect( () => {
  if (owner) {
    async function grabber() {
        const NFTs = await alchemy.nft.getNftsForOwner(owner as unknown as string);
      setNFTs(NFTs);
    }
    console.log(NFTs);
    grabber();
  }  
  }, [NFTs, owner]);