Skip to content

Instantly share code, notes, and snippets.

@anthowen
Forked from dabit3/next-graph-nfts.js
Created May 21, 2021 00:07
Show Gist options
  • Save anthowen/d8e19c92709180790558d67e738fe4ad to your computer and use it in GitHub Desktop.
Save anthowen/d8e19c92709180790558d67e738fe4ad to your computer and use it in GitHub Desktop.
StackBlitz, GraphQL, The Graph, Zora, & Next.js
import React from 'react'
import { createClient } from 'urql';
const client = createClient({
url: 'https://api.thegraph.com/subgraphs/name/dabit3/zoranftsubgraph'
})
const query = `
query {
tokens(
orderBy: createdAtTimestamp
orderDirection: desc
first: 10
) {
id
tokenID
contentURI
metadataURI
}
}
`
async function fetchData() {
const data = await client
.query(query)
.toPromise()
.then(async result => {
const tokenData = await Promise.all(result.data.tokens.map(async token => {
const meta = await (await fetch(token.metadataURI)).json()
console.log(" meta: ", meta)
if (meta.mimeType === 'video/mp4') {
token.type = 'video'
token.meta = meta
}
else if (meta.body && meta.body.mimeType === 'audio/wav') {
token.type = 'audio'
token.meta = meta.body
}
else {
token.type = 'image'
token.meta = meta
}
return token
}))
return tokenData
});
return data
}
export default function Home(props) {
if (props.tokens && props.tokens.length) return (
<div style={{width: 600, margin: '0 auto'}}>
{
props.tokens.map(token => {
return (
<div key={token.contentURI} style={{
padding: '20px 0px'
}}>
{
token.type === 'image' && (
<div>
<img style={{width: '600px'}} src={token.contentURI} />
</div>
)
}
{
token.type === 'video' && (
<div>
<video width="600" height="auto" controls autoPlay>
<source src={token.contentURI} />
</video>
</div>
)
}
{
token.type === 'audio' && (
<audio controls>
<source src={token.contentURI} type="audio/ogg" />
<source src={token.contentURI} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
)
}
<h3 style={{ margin: '8px 0px', fontSize: '22px'}}>{token.meta.name}</h3>
<p >{token.meta.description}</p>
</div>
)
})
}
</div>
)
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
</main>
</div>
)
}
export async function getServerSideProps() {
const data = await fetchData()
return {
props: {
tokens: data
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment