Zenn
⚗️

Alchemyの始め方【NFTの一覧取得】

2022/07/08に公開
JavaScript
React
#
nft
#
alchemy
tech

Alchemyとは？

OpenSeaやAxie Infinityなどの大手のNFTマーケットプレイスやNFTゲームで使われる開発基盤プラットフォーム

使い方

今回は数ある機能の中から個人的にユースケースが高いと感じる「所持してるNFT一覧を表示する」を、実装しようと思います。AlchemyにはSDKやJSなど色々できますが、とりあえずSDKとJSを使おうと思います。
https://docs.alchemy.com/alchemy/enhanced-apis/nft-api/getnfts

【SDK編】

import { Network, initializeAlchemy, getNftsForOwner } from "@alch/alchemy-sdk";
const settings = {
  apiKey: "", //AlchemyのAPIキーを入れる
  network: Network.ETH_RINKEBY,
  maxRetries: 10,
};
const alchemy = initializeAlchemy(settings);
const tmpNFTs = await getNftsForOwner(alchemy, owner)

【REST API編】

const requestOptions = {
    method: 'GET',
};
const apiKey = ''; //APIキーを入れる
const baseURL = `https://eth-rinkeby.alchemyapi.io/v2/${api_key}/getNFTs/`;
const fetchURL = `${baseURL}?owner=${owner}`;
  
const tmpNFTs = await fetch(fetchURL, requestOptions).then((data) => data.json());

コード例

指定したウォレットアドレスが所持しているNFTを一覧で取得して、そのNFTの名前を一覧で表示する機能

全体の流れ

基本的にはuseEffectでAPIからデータをフェッチして表示させる流れです。(useEffectがベストプラクティスじゃないよね系はご了承ください)本当はその前にウォレット接続などもありますが、今回は割愛しています。

【SDK編】

import { useState, useEffect } from 'react'
import { Network, initializeAlchemy, getNftsForOwner } from "@alch/alchemy-sdk";
const app = () => {
  const [NFTs, setNFTs] = useState('');

  const fetchData = async() => {
    const settings = {
    apiKey: "", //APIキーを入れる
    network: Network.ETH_RINKEBY,
    maxRetries: 10,
  　};
   const owner = '0x' //ウォレットアドレスを入れる
   const alchemy = initializeAlchemy(settings);
   const tmpNFTs = await getNftsForOwner(alchemy, owner)
    
    setNFTs(tmpNFTs);
  }
  
  useEffect(() => {
    fetchData();
  },[]);
  
  return(
    <div>
      {NFTs && NFTs.map((item, index) => {
        return(
	  <div>{item.title}</div>
	)
      })}
    </div>
  );
}

【REST API編】

import { useState, useEffect } from 'react'
const app = () => {
  const [NFTs, setNFTs] = useState('');

  const fetchData = async() => {
    const requestOptions = {
      method: 'GET',
    };
    const apiKey = ''; //APIキーを入れる
    const baseURL = `https://eth-rinkeby.alchemyapi.io/v2/${api_key}/getNFTs/`;
    const fetchURL = `${baseURL}?owner=${owner}`;
  
    const tmpNFTs = await fetch(fetchURL, requestOptions).then((data) => data.json());
    setNFTs(tmpNFTs);
  }
  
  useEffect(() => {
    fetchData();
  },[]);
  
  return(
    <div>
      {NFTs && NFTs.map((item, index) => {
        return(
	  <div>{item.title}</div>
	)
      })}
    </div>
  );
}

最後に

getNFTs以外にも便利な機能はたくさんあるので、documentを読みながら進めていくのが良いのかなって思います。

https://docs.alchemy.com/alchemy/

Discussion