Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating The Graph #892

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
5d9d255
Create the-graph
idalithb Dec 3, 2024
74c8954
Delete static/img/get_started/tooling/data_indexers/the-graph
idalithb Dec 3, 2024
7101e74
Update thegraph.mdx
idalithb Dec 3, 2024
36f6e57
Create README.md
idalithb Dec 3, 2024
ac622c3
Add files via upload
idalithb Dec 3, 2024
15d3798
Update thegraph.mdx
idalithb Dec 10, 2024
e63de81
Merge branch 'main' into main
idalithb Dec 10, 2024
974b983
Merge branch 'main' into main
jlwllmr Dec 11, 2024
94d97d8
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
5f7c7af
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
897ee36
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
619a8d9
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
0ef39c4
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
6c17e36
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
851e21d
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
2fccb20
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
07f0e3e
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 11, 2024
c2727fe
Delete static/img/get_started/tooling/data_indexers/the-graph/README.md
idalithb Dec 11, 2024
69d0b75
Merge branch 'main' into main
jlwllmr Dec 12, 2024
db34d73
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 13, 2024
f23f841
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 13, 2024
b9121b3
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 13, 2024
5ffe38c
Update docs/get-started/tooling/data-indexers/thegraph.mdx
idalithb Dec 13, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 270 additions & 15 deletions docs/get-started/tooling/data-indexers/thegraph.mdx
Original file line number Diff line number Diff line change
@@ -1,25 +1,280 @@
---
title: TheGraph network
title: The Graph Network
image: /img/socialCards/thegraph-network.jpg
---

As a dapp developer, retrieving onchain data for your dapp can be challenging
because you will most likely:
# The Graph

Check warning on line 6 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'The Graph' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'The Graph' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 6, "column": 3}}}, "severity": "WARNING"}

1. Consume your RPC provider quota with calls.
2. Need to implement error handling on multiple levels.
3. Define creative strategies to avoid UX impacts when managing a high volume of
data.
Getting historical data on smart contracts can be frustrating when building a
dapp. [The Graph](https://thegraph.com/) offers a powerful way to query smart
contract data with open APIs known as subgraphs. Anyone can create or query
subgraphs, making the data available to the entire ecosystem. The Graph is
powered by hundreds of independent Indexers, enabling your dapp to become truly
decentralized.

The Graph is a decentralized data indexer provider that indexes the Linea
blockchain for you and exposes onchain data through an HTTPS API.
Developers can use 100,000 free queries per month by using The Graph Network.

We run The Graph indexers on Linea to allow you to leverage the power of this
technology.
## Quick Start

Check warning on line 17 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Quick Start' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Quick Start' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 17, "column": 4}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

:::info[update]
Subgraphs index emitted events by default, but additional functionality can be
added later. A subgraph can be created in just a few minutes by following these
steps:

TheGraph is now live with Linea Mainnet! For more information, take a look at
the official [documentation](https://thegraph.com/docs/en/)
1. Initialize your subgraph
2. Publish your subgraph to The Graph Network
3. Query from your dapp with your unique API key

:::
Here is a step-by-step walkthrough:

## 1. Initialize Your Subgraph

Check warning on line 29 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] '1. Initialize Your Subgraph' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] '1. Initialize Your Subgraph' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 29, "column": 4}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

### Create a Subgraph in Subgraph Studio
idalithb marked this conversation as resolved.
Show resolved Hide resolved

Go to the [Subgraph Studio](https://thegraph.com/studio/) and connect your
wallet. Once your wallet is connected, you can begin by clicking "Create a
Subgraph". When choosing a name, it's recommended to use Title Case, including
the subgraph and chain name, e.g., "MyDapp Subgraph Linea".

Check failure on line 36 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Microsoft.Foreign] Use 'for example' instead of 'e.g.,'. Raw Output: {"message": "[Microsoft.Foreign] Use 'for example' instead of 'e.g.,'.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 36, "column": 30}}}, "severity": "ERROR"}

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/create-a-subgraph.png"
alt="alt text here"
/>
</div>
</div>

Then, you will land on your subgraph's page. All the CLI commands you need will
be visible on the right side of the page:

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/cli-commands.png"
alt="alt text here"
/>
</div>
</div>

### Install the Graph CLI⁠

Check warning on line 59 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Install the Graph CLI⁠' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Install the Graph CLI⁠' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 59, "column": 5}}}, "severity": "WARNING"}

On your local machine, run the following:

```
npm install -g @graphprotocol/graph-cli
```

### Initialize Your Subgraph⁠

Check warning on line 67 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Initialize Your Subgraph⁠' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Initialize Your Subgraph⁠' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 67, "column": 5}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

You can copy this directly from your subgraph page to include your specific
subgraph slug:

```
graph init <SUBGRAPH_SLUG>
```

You'll be prompted to provide some info on your subgraph like this:

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/cli-example.png"
alt="alt text here"
/>
</div>
</div>

Simply verify your contract on the block explorer, and the CLI will
automatically obtain the ABI and set up your subgraph. The default settings will
generate an entity for each event.

## 2. Deploy & Publish

Check warning on line 91 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] '2. Deploy & Publish' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] '2. Deploy \u0026 Publish' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 91, "column": 4}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

### Deploy to Subgraph Studio

First, run these commands:

```bash
$ graph codegen
$ graph build
```

Then, run these to authenticate and deploy your subgraph. You can copy these
commands directly from your subgraph's page in Studio to include your specific
deploy key and subgraph slug:

```bash
$ graph auth <DEPLOY_KEY>
$ graph deploy <SUBGRAPH_SLUG>
```

You will be asked for a version label. You can enter something like v0.0.1, but
you're free to choose the format.

### Test Your Subgraph

Check warning on line 114 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Test Your Subgraph' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Test Your Subgraph' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 114, "column": 5}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

You can test your subgraph by making a sample query in the playground section.
The Details tab will show you an API endpoint. You can use that endpoint to test
from your dapp.

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/playground.png"
alt="alt text here"
/>
</div>
</div>

### Publish Your Subgraph to The Graph's Decentralized Network

Check warning on line 129 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Publish Your Subgraph to The Graph's Decentralized Network' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Publish Your Subgraph to The Graph's Decentralized Network' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 129, "column": 5}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

Once your subgraph is ready to be put into production, you can publish it to the
decentralized network. On your subgraph's page in Subgraph Studio, click on the
Publish button:

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/publish-button.png"
alt="alt text here"
/>
</div>
</div>

Before you can query your subgraph, Indexers need to begin serving queries on
it. In order to streamline this process, you can curate your own subgraph using
GRT.

When publishing, you'll see the option to curate your subgraph. As of May 2024,
it is recommended that you curate your own subgraph with at least 3,000 GRT to
ensure that it is indexed and available for querying as soon as possible.

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/publish-screen.png"
alt="alt text here"
/>
</div>
</div>

> **Note:** The Graph's smart contracts are all on Arbitrum One, even though
> your subgraph is indexing data from Ethereum, BSC or any other
> [supported chain](https://thegraph.com/docs/en/developing/supported-networks/).

## 3. Query Your Subgraph

Check warning on line 165 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] '3. Query Your Subgraph' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] '3. Query Your Subgraph' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 165, "column": 4}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

Congratulations! You can now query your subgraph on the decentralized network!

To query any subgraph on the decentralized network, pass a GraphQL query into
the subgraph's query URL, which can be found at the top of its Explorer page.

Here's an example from the
[CryptoPunks Ethereum subgraph](https://thegraph.com/explorer/subgraphs/HdVdERFUe8h61vm2fDyycHgxjsde5PbB832NHgJfZNqK)
by Messari:

Check failure on line 174 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Vale.Spelling] Did you really mean 'Messari'? Raw Output: {"message": "[Vale.Spelling] Did you really mean 'Messari'?", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 174, "column": 4}}}, "severity": "ERROR"}

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/query-url.png"
alt="alt text here"
/>
</div>
</div>

The query URL for this subgraph is:

`https://gateway-arbitrum.network.thegraph.com/api/`**[api-key]**`/subgraphs/id/HdVdERFUe8h61vm2fDyycgxjsde5PbB832NHgJfZNqK`

Now, you simply need to fill in your own API Key to start sending GraphQL
queries to this endpoint.

### Getting Your Own API Key

Check warning on line 192 in docs/get-started/tooling/data-indexers/thegraph.mdx

View workflow job for this annotation

GitHub Actions / Spelling

[vale] reported by reviewdog 🐶 [Consensys.Headings] 'Getting Your Own API Key' should use sentence-style capitalization. Raw Output: {"message": "[Consensys.Headings] 'Getting Your Own API Key' should use sentence-style capitalization.", "location": {"path": "docs/get-started/tooling/data-indexers/thegraph.mdx", "range": {"start": {"line": 192, "column": 5}}}, "severity": "WARNING"}
idalithb marked this conversation as resolved.
Show resolved Hide resolved

In Subgraph Studio, you'll see the "API Keys" menu at the top of the page. Here,
you can create API Keys.

<div class="center-container">
<div class="img-large">
<img
src="/img/get_started/tooling/data_indexers/the-graph/api-keys.png"
alt="alt text here"
/>
</div>
</div>

## Appendix

### Sample Query
idalithb marked this conversation as resolved.
Show resolved Hide resolved

This query shows the most expensive CryptoPunks sold.

```graphql
{
trades(orderBy: priceETH, orderDirection: desc) {
priceETH
tokenId
}
}
```

Passing this into the query URL returns this result:

```
{
"data": {
"trades": [
{
"priceETH": "124457.067524886018255505",
"tokenId": "9998"
},
{
"priceETH": "8000",
"tokenId": "5822"
},
// ...
```

### Sample Code
idalithb marked this conversation as resolved.
Show resolved Hide resolved

```jsx
const axios = require("axios");

const graphqlQuery = `{
trades(orderBy: priceETH, orderDirection: desc) {
priceETH
tokenId
}
}`;
const queryUrl =
"https://gateway-arbitrum.network.thegraph.com/api/[api-key]/subgraphs/id/HdVdERFUe8h61vm2fDyycHgxjsde5PbB832NHgJfZNqK";

const graphQLRequest = {
method: "post",
url: queryUrl,
data: {
query: graphqlQuery,
},
};

// Send the GraphQL query
axios(graphQLRequest)
.then((response) => {
// Handle the response here
const data = response.data.data;
console.log(data);
})
.catch((error) => {
// Handle any errors
console.error(error);
});
```

### Additional Resources
idalithb marked this conversation as resolved.
Show resolved Hide resolved

- To explore all the ways you can optimize & customize your subgraph for better
idalithb marked this conversation as resolved.
Show resolved Hide resolved
performance, read more about
[creating a subgraph here](https://thegraph.com/docs/en/developing/creating-a-subgraph/).
- To learn more about
[querying data from your subgraph](https://thegraph.com/docs/en/querying/querying-the-graph/).
- [Subgraph Studio](https://thegraph.com/studio/).
jlwllmr marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading