dabit3/next-graph-nfts.js

## next-graph-nfts.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
    }
  }
}
	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
	}
	}
	}