diff --git a/navigation/navigation.ts b/navigation/navigation.ts index 85fb9a8a2f70..7e0d3963a8c7 100644 --- a/navigation/navigation.ts +++ b/navigation/navigation.ts @@ -162,6 +162,9 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [ { slug: 'quick-start', }, + { + slug: 'base-testnet', + }, { slug: 'migrating-a-subgraph', }, diff --git a/pages/en/cookbook/base-testnet.mdx b/pages/en/cookbook/base-testnet.mdx new file mode 100644 index 000000000000..0dbf65f2f1a9 --- /dev/null +++ b/pages/en/cookbook/base-testnet.mdx @@ -0,0 +1,109 @@ +--- +title: Building Subgraphs on Base +--- + +This guide will quickly take you through how to initialize, create, and deploy your subgraph on Base testnet. + +What you'll need: + +- A Base testnet contract address +- A crypto wallet (e.g. MetaMask or Coinbase Wallet) + +## Subgraph Studio + +### 1. Install the Graph CLI + +The Graph CLI (>=v0.41.0) is written in JavaScript and you will need to have either `npm` or `yarn` installed to use it. + +```sh +# NPM +npm install -g @graphprotocol/graph-cli + +# Yarn +yarn global add @graphprotocol/graph-cli +``` + +### 2. Create your subgraph in the Subgraph Studio + +Go to the [Subgraph Studio](https://thegraph.com/studio/) and connect your crypto wallet. + +Once connected, click "Create a Subgraph" and enter a name for your subgraph. + +Select "Base (testnet)" as the network and click Create Subgraph. + +### 3. Initialize your Subgraph + +> You can find specific commands for your subgraph in the Subgraph Studio. + +Make sure that the graph-cli is updated to latest (above 0.41.0) + +```sh +graph --version +``` + +Initialize your subgraph from an existing contract. + +```sh +graph init --studio +``` + +Your subgraph slug is an identifier for your subgraph. The CLI tool will walk you through the steps for creating a subgraph, including: + +- Protocol: ethereum +- Subgraph slug: `` +- Directory to create the subgraph in: `` +- Ethereum network: base-testnet \_ Contract address: `` +- Start block (optional) +- Contract name: `` +- Yes/no to indexing events (yes means your subgraph will be bootstrapped with entities in the schema and simple mappings for emitted events) + +### 3. Write your Subgraph + +> If emitted events are the only thing you want to index, then no additional work is required, and you can skip to the next step. + +The previous command creates a scaffold subgraph that you can use as a starting point for building your subgraph. When making changes to the subgraph, you will mainly work with three files: + +- Manifest (subgraph.yaml) - The manifest defines what datasources your subgraphs will index. Make sure to add `base-testnet` as the network name in manifest file to deploy your subgraph on Base testnet. +- Schema (schema.graphql) - The GraphQL schema defines what data you wish to retreive from the subgraph. +- AssemblyScript Mappings (mapping.ts) - This is the code that translates data from your datasources to the entities defined in the schema. + +If you want to index additional data, you will need extend the manifest, schema and mappings. + +For more information on how to write your subgraph, see [Creating a Subgraph](/developing/creating-a-subgraph). + +### 4. Deploy to the Subgraph Studio + +Before you can deploy your subgraph, you will need to authenticate with the Subgraph Studio. You can do this by running the following command: + +Authenticate the subgraph on studio + +```sh +graph auth --studio +``` + +Next, enter your subgraph's directory. + +````sh + cd + ``` + +Build your subgraph with the following command: + + ``` + graph codegen && graph build + ``` + +Finally, you can deploy your subgraph using this command: + + ``` + graph deploy --studio + ``` + +### 5. Query your subgraph + +Once your subgraph is deployed, you can query it from your dapp using the `Development Query URL` in the Subgraph Studio. + +Note - Studio API is rate-limited. Hence should preferably be used for development and testing. + +To learn more about querying data from your subgraph, see the [Querying a Subgraph](/querying/querying-the-graph) page. +````