useNft() 0.6: better caching, Node.js & non-React compatibility 🐢 🚀

This version brings two new things: a more agressive caching strategy, and the possibility to use the library without React. Big thanks to @gretzke who implemented this feature 🙏 ✨

FetchWrapper

FetchWrapper is a class that can be instanciated, and allows to access the NFT fetching mechanism without using React. It works in Node.js, or any non-React environment. Unlike the useNft() hook, the fetchNft() method of a FetchWrapper instance does not retry, cache, or do anything else than attempting to fetch the NFT data once.

This is how you can use it:

import { FetchWrapper } from "use-nft"

// Pass the fetcher declaration to the FetchWrapper
// and call the fetchNft() method to retrieve the NFT data.

const fetcher = ["ethers", { ethers, provider: ethers.getDefaultProvider() }]

const fetchWrapper = new FetchWrapper(fetcher)

const result = await fetchWrapper.fetchNft(
  "0xd07dc4262bcdbf85190c01c996b4c06a461d2430",
  "90473"
)

Related pull request

• FetchWrapper (Node & non-React support) (#46)

Cache invalidation mechanism

NFT metadata doesn’t change so often, so the cached data doesn’t need to be invalidated every time the browser window gets focused again. This is the default behavior with useSWR() which useNft() uses internally, and it is now disabled.

Related pull request

• Stop invalidating cache on window focus (#48)

Other changes

• Remove Promise.any() calls (compat with pre ES2021 envs) (#51)

useNft() 0.5: improved API and new fetcher 🐶

Declarative fetchers

Embedded fetchers can now be passed as a configuration, rather than having to import their initializer.

Before, you had to import a fetcher function and pass its returned value to fetcher:

import ethers from "ethers"
import { ethersFetcher, NftProvider } from "use-nft"

const provider = ethers.getDefaultProvider()
const fetcher = ethersFetcher({ ethers, provider })

function App() {
  return (
    <NftProvider fetcher={fetcher}>
      // …
    </NftProvider>
  )
}

From version 0.5, you have the possibility to declare it in a more direct way:

import ethers from "ethers"
import { NftProvider } from "use-nft"

function App() {
  return (
    <NftProvider fetcher={["ethers", { ethers, provider }]}>
      // …
    </NftProvider>
  )
}

New fetcher: Ethereum Provider (EIP-1193)

useNft() can now work with any standard Ethereum Provider (e.g. MetaMask) and doesn’t require the Ethers library anymore (though we still recommend to use the Ethers fetcher if your app is already using Ethers).

import { NftProvider } from "use-nft"

function App() {
  return (
    <NftProvider fetcher={["ethereum", { ethereum }]}>
      // …
    </NftProvider>
  )
}

Improved useNft() API

The useNft() returned value has been updated to better reflect the loading state:

const result  = useNft("0xd07dc4262bcdbf85190c01c996b4c06a461d2430", "90473")

// one of "error", "loading" and "done"
result.status

// same as status === "loading"
result.loading

// undefined or Error instance when status === "error"
result.error

// call this function to retry in case of error
result.reload

// nft is undefined when status !== "done"
result.nft

// name of the NFT (or empty string)
result.nft.name

// description of the NFT (or empty string)
result.nft.description

// image / media URL of the NFT (or empty string)
result.nft.description

As TypeScript type:

type NftResult = {
  status: "error" | "loading" | "done"
  loading: boolean
  reload: () => void
  error?: Error
  nft?: {
    name: string
    description: string
    image: string
  }
}

Auto retry mechanism

useNft() will also periodically retry to load the NFT in case of error. The object returned by useNft() also provides a reload() utility which allows to retry manually.

NFT platforms changes

• MakersPlace is using imageUrl rather than image in their NFT metadata, this is now supported. (#27)
• MoonCats now relies on pre-generated images from IPFS (#13)

useNft() 0.4: more cats 🐈

useNft() now supports two new not-quite-standard NFT contracts: MoonCats and CryptoKitties. Meow 🐱