Airstack queries
Display data retrieved by an airstack query. You can see the Airstack docs for more information.
Props
query
variables
render
a function to render the result
Example
Retrieve NFTs of an address and display them:
<AirStack
query={`
query tokens($address: Identity!) {
nfts: TokenBalances(
input: {filter: {owner: {_in: [$address]}, tokenType: {_in: [ERC721]}, tokenAddress: {_nin: ["0x22C1f6050E56d2876009903609a2cC3fEf83B415"]}}, limit: 100, blockchain: ethereum}
) {
data:TokenBalance {
amount
chainId
id
tokenAddress
tokenId
tokenType
token {
name
symbol
}
tokenNfts {
tokenId
metaData {
name
}
contentValue {
image {
medium
}
}
}
}
}
}
`}
variables={{
address: userAddress,
}}
render={(data) => (
<div class="grid grid-cols-3 grid-flow-row gap-2 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-4">
{data.nfts.data.map((nft) => (
<div
key={nft.id}
class="card w-full p-4 bg-base-100 shadow-xl image-full"
>
<figure class="h-full w-full m-0 p-0">
<img
class="h-full w-full object-contains"
src={
nft.tokenNfts.contentValue.image
? nft.tokenNfts.contentValue.image.medium
: " "
}
/>
</figure>
<div class="card-body">
<h2 class="card-title text-white">
{nft.tokenNfts.metaData ? nft.tokenNfts.metaData.name : ""}
</h2>
<p>{nft.token.name}</p>
</div>
</div>
))}
</div>
)}
/>