-
-
Save anthowen/d8e19c92709180790558d67e738fe4ad to your computer and use it in GitHub Desktop.
StackBlitz, GraphQL, The Graph, Zora, & Next.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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