Skip to content

Commit c0fd56f

Browse files
ardatanardatan
authored
Create 2 better examples for Cross Chain (#112)
* Dynamic chainId for the generated SDK * Keep the old approach and update docs * .. * .. * .. * Align versions
1 parent 163dce0 commit c0fd56f

22 files changed

+297
-173
lines changed

‎.changeset/config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"javascript-cjs-example",
1515
"react-query-example",
1616
"nextjs-example",
17-
"cross-chain-example"
17+
"cross-chain-sdk",
18+
"cross-chain-extension"
1819
],
1920
"access": "public",
2021
"baseBranch": "main"

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ This library is intended to simplify the network aspect of data consumption for
2020
| ✅ | Fetch Strategies | timeout, retry, fallback, race, highestValue |
2121
| ✅ | Build time validations & optimizations | |
2222
| ✅ | Client-Side Composition | with improved execution planner (based on GraphQL-Mesh) |
23-
| ✅ | Cross-chain Subgraph merging | Merge similiar Subgraphs into a single response |
23+
| ✅ | Cross-chain Subgraph Handling | Use similar subgraphs as a single source |
2424
| ✅ | Raw Execution (standalone mode) | without a wrapping GraphQL client |
2525
| ✅ | Local (client-side) Mutations | |
2626
| ✅ | [Automatic Block Tracking](./packages/block-tracking/README.md) | tracking block numbers [as described here](https://thegraph.com/docs/en/developer/distributed-systems/#polling-for-updated-data) |
@@ -144,7 +144,9 @@ You can also refer to [examples directory in this repo](./examples/), for more a
144144
- [Integration with NextJS and TypeScript](./examples/nextjs/)
145145
- [Integration with Apollo-Client and React](./examples/apollo/)
146146
- [Integration with React-Query](./examples/react-query/)
147-
- [Cross-chain merging (same Subgraph, different chains)](./examples/cross-chain/)
147+
- _Cross-chain merging (same Subgraph, different chains)_
148+
- - [Parallel SDK calls](./examples/cross-chain-sdk/)
149+
- - [Parallel internal calls with schema extensions](./examples/cross-chain-extension/)
148150
- [Customize execution with Transforms (auto-pagination and auto-block-tracking)](./examples/transforms/)
149151

150152
### Advanced Examples/Features

‎examples/cross-chain/.gitignore‎ renamed to ‎examples/cross-chain-extension/.gitignore‎

File renamed without changes.

‎examples/cross-chain-extension/.graphclientrc.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
sources:
2+
- name: Sushiswap
3+
handler:
4+
graphql:
5+
# Default value is bentobox-avalance
6+
# This is needed for the initial introspection on buildtime
7+
endpoint: https://api.thegraph.com/subgraphs/name/matthewlilley/{context.chainName:bentobox-avalanche}
8+
9+
additionalTypeDefs: |
10+
extend type Rebase {
11+
chainName: String
12+
}
13+
extend type Query {
14+
crossRebases(first: Int!, chainNames: [String!]!): [Rebase!]!
15+
}
16+
17+
additionalResolvers:
18+
- ./src/resolvers.ts
19+
20+
documents:
21+
- ./example-query.graphql
22+
23+
codegen:
24+
contextType: 'MeshContext & { chainName: string }'

‎examples/cross-chain-extension/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
### The Graph Client / NodeJS (TS)
2+
3+
This examples integrates The Graph Client with NodeJS/TypeScript usage, with 2 Subgraphs that has similar GraphQL schemas. The goal of this example is to do requests to different subgraphs with dynamic context values
4+
5+
The example here is using the following tools/concepts:
6+
7+
- NodeJS + TypeScript
8+
- The Graph Client CLI for generating artifacts
9+
- [Schema-stitching resolvers extension](https://www.graphql-mesh.com/docs/guides/extending-unified-schema)
10+
11+
```mermaid
12+
flowchart TB
13+
linkStyle default interpolate basis
14+
c1[(Chain 1)]-->t1
15+
c2[(Chain 2)]-->t2
16+
17+
subgraph "Subgraph A"
18+
t1("type Something")
19+
end
20+
21+
subgraph "Subgraph B"
22+
t2("type Something")
23+
end
24+
25+
t1---ccc
26+
t2---ccc
27+
ccc["Client-side composition"]---gc["Graph Client"]
28+
29+
subgraph m["Composed Schema"]
30+
t3("type Something {
31+
# ... rest of the fields
32+
chainId: String!
33+
}")
34+
end
35+
36+
gc---m
37+
```
38+
39+
### Getting Started
40+
41+
To run this example, make sure to install the dependencies in the root of the monorepo, build the client locally, and then run this example:
42+
43+
```
44+
# In the root directory
45+
$ yarn install
46+
$ yarn build
47+
$ cd examples/cross-chain-extension
48+
$ yarn build-client
49+
$ yarn start
50+
```
51+
52+
### DevTools
53+
54+
You can also run The Graph Client DevTools by running: `yarn graphiql`.

‎examples/cross-chain-extension/example-query.graphql‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
query CrossRebasesExample($chainNames: [String!]!) {
2+
crossRebases(first: 2, chainNames: $chainNames) {
3+
chainName
4+
id
5+
base
6+
elastic
7+
}
8+
}

‎examples/cross-chain-extension/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "cross-chain-extension",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"start": "ts-node --transpileOnly src/index.ts",
7+
"build-client": "graphclient build",
8+
"check": "tsc --pretty --noEmit",
9+
"graphiql": "graphclient serve-dev"
10+
},
11+
"dependencies": {
12+
"@graphprotocol/client-add-source-name": "1.0.1",
13+
"@graphprotocol/client-cli": "2.0.0",
14+
"graphql": "16.3.0"
15+
}
16+
}

‎examples/cross-chain-extension/src/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { getBuiltGraphSDK } from '../.graphclient'
2+
3+
// Cross Chain Call from additional type definitions and resolvers
4+
async function main() {
5+
const sdk = getBuiltGraphSDK()
6+
// Second parameter is the context value
7+
const results = await sdk.CrossRebasesExample({
8+
chainNames: ['bentobox-avalanche', 'bentobox-bsc'],
9+
})
10+
11+
console.table(results.crossRebases)
12+
}
13+
14+
main().catch((e) => {
15+
console.error(e)
16+
process.exit(1)
17+
})

‎examples/cross-chain-extension/src/resolvers.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Resolvers, MeshContext } from '../.graphclient'
2+
3+
export const resolvers: Resolvers = {
4+
Rebase: {
5+
// chainName can exist already in root as we pass it in the other resolver
6+
chainName: (root, args, context, info) => root.chainName || context.chainName || 'bentobox-avalanche', // The value we provide in the config
7+
},
8+
Query: {
9+
crossRebases: async (root, args, context, info) =>
10+
Promise.all(
11+
args.chainNames.map((chainName) =>
12+
context.Sushiswap.Query.rebases({
13+
root,
14+
args,
15+
context: {
16+
...context,
17+
chainName,
18+
},
19+
info,
20+
}).then((rebases) =>
21+
// We send chainName here so we can take it in the resolver above
22+
rebases.map((rebase) => ({
23+
...rebase,
24+
chainName,
25+
})),
26+
),
27+
),
28+
).then((allRebases) => allRebases.flat()),
29+
},
30+
}

‎examples/cross-chain-extension/tsconfig.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"target": "esnext",
5+
"moduleResolution": "node",
6+
"module": "commonjs",
7+
"sourceMap": true,
8+
"lib": ["esnext", "DOM", "DOM.Iterable"],
9+
"allowSyntheticDefaultImports": true
10+
},
11+
"files": ["src/index.ts"]
12+
}

0 commit comments

Comments
 (0)