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

1. Automate with Gitpod in Browser

You can deploy this project with Gitpod by clicking here:

Once the setup is complete, the app will be started and you should be able to open it and view it:

2. Local Deployment on your Machine

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.

3. Deploying your own Subgraph

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

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