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
Copy file name to clipboardExpand all lines: website/pages/en/querying/querying-best-practices.mdx
+30-33Lines changed: 30 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,11 +2,9 @@
2
2
title: Querying Best Practices
3
3
---
4
4
5
-
The Graph provides a decentralized way to query data from blockchains.
5
+
The Graph provides a decentralized way to query data from blockchains via GraphQL API, making it easier to query data with the GraphQL language.
6
6
7
-
The Graph network's data is exposed through a GraphQL API, making it easier to query data with the GraphQL language.
8
-
9
-
This page will guide you through the essential GraphQL language rules and GraphQL queries best practices.
7
+
Learn the essential GraphQL language rules and GraphQL queries best practices.
10
8
11
9
---
12
10
@@ -71,7 +69,7 @@ GraphQL is a language and set of conventions that transport over HTTP.
71
69
72
70
It means that you can query a GraphQL API using standard `fetch` (natively or via `@whatwg-node/fetch` or `isomorphic-fetch`).
73
71
74
-
However, as stated in ["Querying from an Application"](/querying/querying-from-an-application), we recommend you to use our `graph-client`that supports unique features such as:
72
+
However, as stated in ["Querying from an Application"](/querying/querying-from-an-application), it's recommend to use `graph-client`which supports unique features such as:
75
73
76
74
- Cross-chain Subgraph Handling: Querying from multiple subgraphs in a single query
@@ -191,17 +187,18 @@ const result = await execute(query, {
191
187
})
192
188
```
193
189
194
-
Note: The opposite directive is `@skip(if: ...)`.
190
+
> Note: The opposite directive is `@skip(if: ...)`.
195
191
196
192
### Ask for what you want
197
193
198
194
GraphQL became famous for its "Ask for what you want" tagline.
199
195
200
196
For this reason, there is no way, in GraphQL, to get all available fields without having to list them individually.
201
197
202
-
When querying GraphQL APIs, always think of querying only the fields that will be actually used.
203
-
204
-
A common cause of over-fetching is collections of entities. By default, queries will fetch 100 entities in a collection, which is usually much more than what will actually be used, e.g., for display to the user. Queries should therefore almost always set first explicitly, and make sure they only fetch as many entities as they actually need. This applies not just to top-level collections in a query, but even more so to nested collections of entities.
198
+
- When querying GraphQL APIs, always think of querying only the fields that will be actually used.
199
+
- A common cause of over-fetching is collections of entities. By default, queries will fetch 100 entities in a collection, which is usually much more than what will actually be used, e.g., for display to the user.
200
+
- Queries should always be set first explicitly.
201
+
- Make sure queries only fetch as many entities as they actually need. This applies not just to top-level collections in a query, but even more so to nested collections of entities.
205
202
206
203
For example, in the following query:
207
204
@@ -337,8 +334,8 @@ query {
337
334
338
335
Such repeated fields (`id`, `active`, `status`) bring many issues:
339
336
340
-
-harder to read for more extensive queries
341
-
-when using tools that generate TypeScript types based on queries (_more on that in the last section_), `newDelegate` and `oldDelegate` will result in two distinct inline interfaces.
337
+
-Harder to read for more extensive queries
338
+
-When using tools that generate TypeScript types based on queries (_more on that in the last section_), `newDelegate` and `oldDelegate` will result in two distinct inline interfaces.
342
339
343
340
A refactored version of the query would be the following:
344
341
@@ -364,13 +361,13 @@ fragment DelegateItem on Transcoder {
364
361
}
365
362
```
366
363
367
-
Using GraphQL `fragment` will improve readability (especially at scale) but also will result in better TypeScript types generation.
364
+
Using GraphQL `fragment` will improve readability (especially at scale) and result in better TypeScript types generation.
368
365
369
366
When using the types generation tool, the above query will generate a proper `DelegateItemFragment` type (_see last "Tools" section_).
370
367
371
368
### GraphQL Fragment do's and don'ts
372
369
373
-
**Fragment base must be a type**
370
+
### Fragment base must be a type
374
371
375
372
A Fragment cannot be based on a non-applicable type, in short, **on type not having fields**:
376
373
@@ -382,7 +379,7 @@ fragment MyFragment on BigInt {
382
379
383
380
`BigInt` is a **scalar** (native "plain" type) that cannot be used as a fragment's base.
384
381
385
-
**How to spread a Fragment**
382
+
#### How to spread a Fragment
386
383
387
384
Fragments are defined on specific types and should be used accordingly in queries.
388
385
@@ -411,16 +408,16 @@ fragment VoteItem on Vote {
411
408
412
409
It is not possible to spread a fragment of type `Vote` here.
413
410
414
-
**Define Fragment as an atomic business unit of data**
411
+
#### Define Fragment as an atomic business unit of data
415
412
416
413
GraphQL Fragment must be defined based on their usage.
417
414
418
415
For most use-case, defining one fragment per type (in the case of repeated fields usage or type generation) is sufficient.
419
416
420
417
Here is a rule of thumb for using Fragment:
421
418
422
-
-when fields of the same type are repeated in a query, group them in a Fragment
423
-
-when similar but not the same fields are repeated, create multiple fragments, ex:
419
+
-When fields of the same type are repeated in a query, group them in a Fragment
420
+
-When similar but not the same fields are repeated, create multiple fragments, ex:
424
421
425
422
```graphql
426
423
# base fragment (mostly used in listing)
@@ -443,7 +440,7 @@ fragment VoteWithPoll on Vote {
443
440
444
441
---
445
442
446
-
## The essential tools
443
+
## The Essential Tools
447
444
448
445
### GraphQL web-based explorers
449
446
@@ -473,21 +470,21 @@ This will allow you to **catch errors without even testing queries** on the play
473
470
474
471
The [GraphQL VSCode extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) is an excellent addition to your development workflow to get:
475
472
476
-
-syntax highlighting
477
-
-autocomplete suggestions
478
-
-validation against schema
479
-
-snippets
480
-
-go to definition for fragments and input types
473
+
-Syntax highlighting
474
+
-Autocomplete suggestions
475
+
-Validation against schema
476
+
-Snippets
477
+
-Go to definition for fragments and input types
481
478
482
479
If you are using `graphql-eslint`, the [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is a must-have to visualize errors and warnings inlined in your code correctly.
483
480
484
481
**WebStorm/Intellij and GraphQL**
485
482
486
483
The [JS GraphQL plugin](https://plugins.jetbrains.com/plugin/8097-graphql/) will significantly improve your experience while working with GraphQL by providing:
487
484
488
-
-syntax highlighting
489
-
-autocomplete suggestions
490
-
-validation against schema
491
-
-snippets
485
+
-Syntax highlighting
486
+
-Autocomplete suggestions
487
+
-Validation against schema
488
+
-Snippets
492
489
493
-
More information on this [WebStorm article](https://blog.jetbrains.com/webstorm/2019/04/featured-plugin-js-graphql/)that showcases all the plugin's main features.
490
+
For more information on this topic, check out the [WebStorm article](https://blog.jetbrains.com/webstorm/2019/04/featured-plugin-js-graphql/)which showcases all the plugin's main features.
0 commit comments