Fetching NFT Data

Learn how to fetch your NFT data

Since most NFTs are stored on-chain, retrieving metadata can be a complex process. There are two main options for retrieving data.

1. Directly from the Source Network

2. From Koii Nodes

3. Using Koii-X custom query hook

Directly from the Source Network

Reading data from the source network directly means that we can often only read one NFT at a time and that the data will be missing contextual information. This can still be useful for certain applications and during testing.

Atomic NFTs (from Arweave)

Atomic NFTs are some of the easiest to read into an application, since Arweave has a number of supported REST APIs. The arweave.net gateway provides easy CORS-compatible services for pulling in contract data, but it will need to be reconstructed using the SmartWeave libraries client-side to get the latest state.

// Some code showing how to fetch an NFT via Smartweave's API 
import Arweave from "arweave";

const arweave = new Arweave({
    host: 'arweave.net',
    port: 443,
    protocol: 'https'
  });
  
const id = "NFTid"
getDatafromArweave(id);


async function getDatafromArweave(id) {
    let NFTdata = await arweave.transactions.get(id)
    console.log(NFTdata)
}

Ethereum NFTs (from Ethereum, Polygon, or Avalanche)

Ethereum NFTs are coming soon to Koii-X Templates.

From the Koii Nodes via the Mainnet API

If you are using Atomic NFTs, there is often a lot of additional information such as attention tracking counts, total KOII rewards, and bridging information. To fetch full NFT records, you can query the Koii Mainnet Gateway APIs as shown below:

// Some code showing how to query mainnet.koii.live for the latest NFT states
import * as kweb from "@_koi/sdk/web";
let ktools = new kweb.Web();

const id = "NFTid"
getDatafromArweave(id);

async function getDatafromArweave(id) {
    let NFTdata = await ktools.getNftState(id);
    console.log(NFTdata)
}

Using Koii-X custom query hook

This is the easiest way to fetch the data of an NFT:

Import useNft query hook

import { useNft } from "api/hooks";

Pass your NFT id to useNft

const nftId = 8ZsDVH9Iotsx4Y1U6QPdBibR3N1BkKt1CgEsYRyKUSE;
const { data, isLoading } = useNft({ id: nftId });

That's it. You should have this NFT content in data