Query NFT data with a Subgraph in your Browser

This is an example app to show you how to query data from a Subgraph from a client-side application.

The project includes a front-end application built with Next.js that queries NFT data from a subgraph that indexes data from the Foundation smart contracts.

Deployment options

Automated with Gitpod

You can deploy this project with Gitpod by clicking here:

Local deployment

To deploy locally, follow these steps:

1. Clone the project

git clone [email protected]:graphprotocol/full-stack-graph-app.git

2. Change into the graph-frontend directory and install the dependencie:

cd full-stack-graph-app/graph-frontend

npm install

3. Start the server:

npm run dev

4. Optional

If you have an endpoint that you'd like to use, update .env.local with your subgraph endpoint.

Deploying your own subgraph

1. Change into the foundation-subgraph directory and install the dependencie:

cd foundation-subgraph

npm install

2. Create a new Subgraph in Subgraph Studio

3. Configure your deploy key

graph auth --studio

4. Deploy your subgraph

graph deploy --studio <subgraph-name>

5. Update the API endpoint environment variable in graph-frontent/.env.local