Skip to content

Commit 0a02d55

Browse files
committed
edits
1 parent 56d0d0c commit 0a02d55

File tree

1 file changed

+30
-33
lines changed

1 file changed

+30
-33
lines changed

website/pages/en/querying/querying-best-practices.mdx

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
title: Querying Best Practices
33
---
44

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.
66

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.
108

119
---
1210

@@ -71,7 +69,7 @@ GraphQL is a language and set of conventions that transport over HTTP.
7169

7270
It means that you can query a GraphQL API using standard `fetch` (natively or via `@whatwg-node/fetch` or `isomorphic-fetch`).
7371

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:
7573

7674
- Cross-chain Subgraph Handling: Querying from multiple subgraphs in a single query
7775
- [Automatic Block Tracking](https://github.com/graphprotocol/graph-client/blob/main/packages/block-tracking/README.md)
@@ -104,8 +102,6 @@ main()
104102

105103
More GraphQL client alternatives are covered in ["Querying from an Application"](/querying/querying-from-an-application).
106104

107-
Now that we covered the basic rules of GraphQL queries syntax, let's now look at the best practices of GraphQL query writing.
108-
109105
---
110106

111107
## Best Practices
@@ -164,11 +160,11 @@ Doing so brings **many advantages**:
164160
- **Variables can be cached** at server-level
165161
- **Queries can be statically analyzed by tools** (more on this in the following sections)
166162

167-
**Note: How to include fields conditionally in static queries**
163+
### How to include fields conditionally in static queries
168164

169-
We might want to include the `owner` field only on a particular condition.
165+
You might want to include the `owner` field only on a particular condition.
170166

171-
For this, we can leverage the `@include(if:...)` directive as follows:
167+
For this, you can leverage the `@include(if:...)` directive as follows:
172168

173169
```tsx
174170
import { execute } from 'your-favorite-graphql-client'
@@ -191,17 +187,18 @@ const result = await execute(query, {
191187
})
192188
```
193189

194-
Note: The opposite directive is `@skip(if: ...)`.
190+
> Note: The opposite directive is `@skip(if: ...)`.
195191
196192
### Ask for what you want
197193

198194
GraphQL became famous for its "Ask for what you want" tagline.
199195

200196
For this reason, there is no way, in GraphQL, to get all available fields without having to list them individually.
201197

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.
205202

206203
For example, in the following query:
207204

@@ -337,8 +334,8 @@ query {
337334

338335
Such repeated fields (`id`, `active`, `status`) bring many issues:
339336

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.
342339

343340
A refactored version of the query would be the following:
344341

@@ -364,13 +361,13 @@ fragment DelegateItem on Transcoder {
364361
}
365362
```
366363

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.
368365

369366
When using the types generation tool, the above query will generate a proper `DelegateItemFragment` type (_see last "Tools" section_).
370367

371368
### GraphQL Fragment do's and don'ts
372369

373-
**Fragment base must be a type**
370+
### Fragment base must be a type
374371

375372
A Fragment cannot be based on a non-applicable type, in short, **on type not having fields**:
376373

@@ -382,7 +379,7 @@ fragment MyFragment on BigInt {
382379

383380
`BigInt` is a **scalar** (native "plain" type) that cannot be used as a fragment's base.
384381

385-
**How to spread a Fragment**
382+
#### How to spread a Fragment
386383

387384
Fragments are defined on specific types and should be used accordingly in queries.
388385

@@ -411,16 +408,16 @@ fragment VoteItem on Vote {
411408

412409
It is not possible to spread a fragment of type `Vote` here.
413410

414-
**Define Fragment as an atomic business unit of data**
411+
#### Define Fragment as an atomic business unit of data
415412

416413
GraphQL Fragment must be defined based on their usage.
417414

418415
For most use-case, defining one fragment per type (in the case of repeated fields usage or type generation) is sufficient.
419416

420417
Here is a rule of thumb for using Fragment:
421418

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:
424421

425422
```graphql
426423
# base fragment (mostly used in listing)
@@ -443,7 +440,7 @@ fragment VoteWithPoll on Vote {
443440

444441
---
445442

446-
## The essential tools
443+
## The Essential Tools
447444

448445
### GraphQL web-based explorers
449446

@@ -473,21 +470,21 @@ This will allow you to **catch errors without even testing queries** on the play
473470

474471
The [GraphQL VSCode extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) is an excellent addition to your development workflow to get:
475472

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
481478

482479
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.
483480

484481
**WebStorm/Intellij and GraphQL**
485482

486483
The [JS GraphQL plugin](https://plugins.jetbrains.com/plugin/8097-graphql/) will significantly improve your experience while working with GraphQL by providing:
487484

488-
- syntax highlighting
489-
- autocomplete suggestions
490-
- validation against schema
491-
- snippets
485+
- Syntax highlighting
486+
- Autocomplete suggestions
487+
- Validation against schema
488+
- Snippets
492489

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

Comments
 (0)