You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[Integration with Urql and React](./examples/urql/)
130
+
-[Integration with NextJS and TypeScript](./examples/nextjs/)
133
131
-[Integration with Apollo-Client and React](./examples/apollo/)
132
+
-[Integration with React-Query](./examples/react-query/)
133
+
-[Customize execution with Transforms (auto-pagination and auto-block-tracking)](./examples/transforms/)
134
134
135
135
### Advanced Examples/Features
136
136
@@ -163,7 +163,7 @@ sources:
163
163
Then, you can specify that when you execute operations:
164
164
165
165
```ts
166
-
client.execute(myQuery, myVariables, {
166
+
execute(myQuery, myVariables, {
167
167
config: {
168
168
apiToken: 'MY_TOKEN',
169
169
},
@@ -269,7 +269,7 @@ sources:
269
269
270
270
The `race` mechanism allow you to specify use more than one GraphQL endpoint, for the same source, and race on every execution.
271
271
272
-
This is usefull if you want to use more than one indexer for the same Subgraph, and allow both sources to race and get the fastest response from all specified indexers.
272
+
This is useful if you want to use more than one indexer for the same Subgraph, and allow both sources to race and get the fastest response from all specified indexers.
273
273
274
274
```yaml
275
275
sources:
@@ -284,6 +284,49 @@ sources:
284
284
285
285
</details>
286
286
287
+
<details>
288
+
<summary>`highestValue`</summary>
289
+
290
+
This strategy allows you to send parallel requests to different endpoints for the same source and choose the most updated.
291
+
292
+
This is useful if you want to choose most synced data for the same Subgraph over different indexers/sources.
The Graph Client can track block numbers and do the following queries by following [this pattern](https://thegraph.com/docs/en/developer/distributed-systems/#polling-for-updated-data) with `blockTracking` transform;
@@ -446,12 +489,11 @@ Now, run the GraphQL CLI `build` command again, the CLI will generate a `TypedDo
446
489
For example, a query called `query ExampleQuery` will have the corresponding `ExampleQueryDocument` generated in `.graphclient`. You can now import it and use that for your GraphQL calls, and you'll have a fully typed experince without writing or specifying any TypeScript manually:
447
490
448
491
```ts
449
-
import { ExampleQueryDocument } from '../.graphclient'
492
+
import { ExampleQueryDocument, execute } from '../.graphclient'
450
493
451
494
async function main() {
452
-
const client = await client$
453
495
// "result" variable is fully typed, and represent the exact structure of the fields you selected in your query.
454
-
const result = await client.execute(ExampleQueryDocument, {})
496
+
const result = await execute(ExampleQueryDocument, {})
455
497
console.log(result)
456
498
}
457
499
```
@@ -524,7 +566,7 @@ export default resolvers
524
566
If you need to inject runtime variables into your GraphQL execution `context`, you can use the following snippet:
To allow simple and efficient client-side composition, we'll use [`graphql-tools`](https://www.graphql-tools.com/) to create a remote schema / Executor, then can be hooked into the GraphQL client.
36
34
37
-
API could be either raw `graphql-tools` transformers, or using [GraphQL-Mesh declerative API](https://www.graphql-mesh.com/docs/transforms/transforms-introduction) for composing the schema.
35
+
API could be either raw `graphql-tools` transformers, or using [GraphQL-Mesh declerative API](https://www.graphql-mesh.com/docs/transforms/transforms-introduction) for composing the schema.
38
36
39
-
```mermaid
37
+
```mermaid
40
38
graph LR;
41
39
g[GraphQL Schema/Executor]-->m{Composer};
42
40
m-->s1[Subgraph A GraphQL schema];
@@ -46,50 +44,60 @@ graph LR;
46
44
47
45
### Subgraph Execution Strategies
48
46
49
-
Within every Subgraph defined as source, there will be a way to define it's source(s) indexer and the querying strategy, here are a few options:
47
+
Within every Subgraph defined as source, there will be a way to define it's source(s) indexer and the querying strategy, here are a few options:
50
48
51
49
```mermaid
52
50
graph LR;
53
51
subgraph race
54
-
req(Outgoing Query)-->sA[Subgraph A];
52
+
req(Outgoing Query)-->sA[Subgraph A];
55
53
sA-->d{RaceStrategy};
56
-
d-->s1[Source 1];
57
-
d-->s2[Source 2];
54
+
d-->s1[Source 1];
55
+
d-->s2[Source 2];
58
56
s1-->d;
59
57
s2-->d;
60
58
end
61
-
59
+
62
60
subgraph fallback
63
-
req2(Outgoing Query)-->sA2[Subgraph A];
61
+
req2(Outgoing Query)-->sA2[Subgraph A];
64
62
sA2-->d2{FallbackStrategy};
65
-
d2-->s3[Source 1];
66
-
s3-->|error|s4[Source 2];
63
+
d2-->s3[Source 1];
64
+
s3-->|error|s4[Source 2];
67
65
s4-->|ok|d2;
68
66
s3-->|ok|d2;
69
67
end
70
-
68
+
71
69
subgraph retry
72
-
req3(Outgoing Query)-->sA3[Subgraph A];
70
+
req3(Outgoing Query)-->sA3[Subgraph A];
73
71
sA3-->d3{RetryStrategy};
74
72
d3-->s5[Source 1];
75
73
s5-->|error|s5;
76
74
s5-->|ok|d3;
77
75
end
76
+
77
+
subgraph highestValue
78
+
req(Outgoing Query)-->sA[Subgraph A];
79
+
sA-->d{HighestValueStrategy};
80
+
d-->s1[Source 1];
81
+
d-->s2[Source 2];
82
+
s1-->synced["process"]
83
+
s2-->synced
84
+
synced-->|"max(_meta.block_number)"|d
85
+
end
78
86
```
79
87
80
-
> We can ship a several built-in strategies, along with a simple interfaces to allow developers to write their own.
88
+
> We can ship a several built-in strategies, along with a simple interfaces to allow developers to write their own.
81
89
82
-
To take the concept of strageties to the extreme, we can even build a magical layer that does subscription-as-query, with any hook, and provide a smooth DX for dapps:
90
+
To take the concept of strageties to the extreme, we can even build a magical layer that does subscription-as-query, with any hook, and provide a smooth DX for dapps:
83
91
84
-
```mermaid
92
+
```mermaid
85
93
graph LR;
86
94
app[App]-->|`subscription somedata`|c;
87
95
c[Any GraphQL Client]-->l[Compatibility Layer];
88
96
l-->|executes|g[GraphQL Schema/Executor];
89
97
g-->op[Orchestrator]
90
-
op-->|query somedata|sA[Subgraph];
98
+
op-->|query somedata|sA[Subgraph];
91
99
sc[Smart Contract]-->|change event|op;
92
100
```
93
101
94
-
With this mechanism, developers can write and execute GraphQL `subscription`, but under the hood we'll execute a GraphQL `query` to The Graph indexers, and allow to connect any external hook/probe for re-running the operation.
95
-
This way, we can watch for changes on the Smart Contract itself, and the GraphQL client will fill the gap on the need to real-time changes from The Graph.
102
+
With this mechanism, developers can write and execute GraphQL `subscription`, but under the hood we'll execute a GraphQL `query` to The Graph indexers, and allow to connect any external hook/probe for re-running the operation.
103
+
This way, we can watch for changes on the Smart Contract itself, and the GraphQL client will fill the gap on the need to real-time changes from The Graph.
0 commit comments