Pagination

Large amounts of collectibles can be returned during querying, this section will help you manage the results to provide better UX to your users.

By default, the Assets Query will return 10 results.

Throughout the API we use Relay compliant pagination.

Page Information

This means we allow the following properties in pageInfo:

• endCursor - The cursor of the last item returned

• nextPage - The cursor for the start of the next page (This is the same as endCursor)

• startCursor - The cursor of the first element retrieved

• hasNextPage - If there are more pages of data

• hasPreviousPage - If there is a previous page of data (Not supported)

In Query Arguments

When running a paginated query the following properties in the query arguments are available:

• after - The cursor to start from. Typically this would be the endCursor from a previous query

• first - The amount of items that you are requesting to be returned

Usage

React

import React from 'react'
import { useAccount } from 'wagmi'
import { ChainAddress } from '@fv-asset-registry/common'
import { useAssets } from '@futureverse/asset-register-react'
import { useFuturePassAccountAddress } from '@futureverse/react'

// React component to render all collectibles owned by a FuturePass user logged in.
export const AssetList = () => {
  const {
    assets
  } = useAssets(
    {
      first: 1000,
      after: "NA=="
    }
  )
  if (!assets) {
    return null
  }

  return (
    <div>
      {assets.map((asset) => <Asset key={asset.id} asset={asset} />)}
    </div>
  )

Node.JS

import { AssetRegister } from '@futureverse/asset-register'
const ar = new AssetRegister({
    ...
})

const assets = await ar.assets({
    first: 1000,
    after: "NA=="
})

GraphQL

query GetAssets($after: String, $first: Float) {
  assets(
    addresses: $addresses
    collectionIds: $collectionIds
    after: $after
    first: $first
  ) {
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      node {
        id
        collectionId
        tokenId
        assetType
        assetTree {
          data
          nodeId
        }
        schema {
          name
          namespace
          schema
          version
        }
        ownership {
          __typename
          ... on SFTAssetOwnership {
            id
            balancesOf(addresses: $addresses) {
              balance
              owner {
                address
              }
            }
          }
          ... on NFTAssetOwnership {
            owner {
              address
            }
          }
        }
        metadata {
          attributes
          properties
          uri
        }
        links {
          __typename
          ... on SFTAssetLink {
            parentLinks(addresses: $addresses) {
              collectionId
              tokenId
            }
          }
          ... on NFTAssetLink {
            parentLink {
              collectionId
              tokenId
            }
          }
        }
        collection {
          id
          chainId
          chainType
          location
          name
        }
      }
    }
  }
}

{
  "first": 1000,
  "after": "NA=="
}