Skip to content

Commit cf158a0

Browse files
committed
adding feedback
1 parent fbaf9c1 commit cf158a0

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Use The Graph's GraphQL API to query [Subgraph](/subgraphs/developing/subgraphs/
1010

1111
### The Anatomy of a GraphQL Query
1212

13-
> GraphQL queries use GraphQL language, which is defined in the [GraphQL specification](https://spec.graphql.org/).
13+
> GraphQL queries use the GraphQL language, which is defined in the [GraphQL specification](https://spec.graphql.org/).
1414
1515
Unlike REST APIs, GraphQL APIs are built on a schema-driven design that defines which queries can be performed.
1616

@@ -25,7 +25,7 @@ query GetToken($id: ID!) {
2525
}
2626
```
2727

28-
The expected response will return a predictable JSON response (when passing the proper `$id` variable value):
28+
which will return a predictable JSON response (when passing the proper `$id` variable value):
2929

3030
```json
3131
{
@@ -53,9 +53,9 @@ query [operationName]([variableName]: [variableType]) {
5353
> Important: Failing to follow these rules will result in an error from The Graph API.
5454
5555
1. Each `queryName` must only be used once per operation.
56-
2. Each `field` must be used only once in a selection (you cannot query `id` twice under `token`)
57-
3. Complex types require selection of sub-fields.
58-
- For example, some `fields' or queries (like `tokens`) return complex types which will require a selection of sub-field. Not providing a selection when expected or providing one when not expected will raise an error, such as `id`. To know a field type, please refer to [Graph Explorer](/subgraphs/explorer/).
56+
2. Each `field` must be used only once in a selection (you cannot query `id` twice under `token`).
57+
3. Complex types require a selection of sub-fields.
58+
- For example, some `fields' or queries (like `tokens`) return complex types which will require a selection of sub-fields. Not providing a selection when expected or providing one when not expected will raise an error, such as `id`. To know a field type, please refer to [Graph Explorer](/subgraphs/explorer/).
5959
4. Any variable assigned to an argument must match its type.
6060
5. Variables must be uniquely defined and used.
6161

@@ -104,7 +104,7 @@ For more alternatives, see ["Querying from an Application"](/subgraphs/querying/
104104

105105
### 1. Always Write Static Queries
106106

107-
A common bad practice is to dynamically build a query strings as follows:
107+
A common bad practice is to dynamically build a query string as follows:
108108

109109
```tsx
110110
const id = params.id
@@ -122,10 +122,10 @@ query GetToken {
122122

123123
While the example above produces a valid GraphQL query, it comes with several issues:
124124

125-
- The full query is harder to understand
126-
- Developers are responsible for safely sanitizing the string interpolation
127-
- Not sending the values of the variables as part of the request can block server-side caching
128-
- It prevents tools from statically analyzing the query (ex: Linter, or type generations tools)
125+
- The full query is harder to understand.
126+
- Developers are responsible for safely sanitizing the string interpolation.
127+
- Not sending the values of the variables as part of the request can block server-side caching.
128+
- It prevents tools from statically analyzing the query (e.g.linters or type generation tools).
129129

130130
Instead, it's recommended to **always write queries as static strings**.
131131

@@ -153,10 +153,10 @@ const result = await execute(query, {
153153

154154
Static strings have several **key advantages**:
155155

156-
- Queries are easier to read, manage, and debug
157-
- Variable sanitization is handled by the GraphQL server The GraphQL
158-
- Variables can be cached at server-level
159-
- Queries can be statically analyzed by tools (see [GraphQL Essential Tools](/subgraphs/querying/best-practices/#graphql-essential-tools-guides))
156+
- Queries are easier to read, manage, and debug.
157+
- Variable sanitization is handled by the GraphQL server The GraphQL.
158+
- Variables can be cached at the server level.
159+
- Queries can be statically analyzed by tools (see [GraphQL Essential Tools](/subgraphs/querying/best-practices/#graphql-essential-tools-guides)).
160160

161161
### 2. Include Fields Conditionally in Static Queries
162162

@@ -190,7 +190,7 @@ const result = await execute(query, {
190190

191191
### 3. Ask Only For What You Want
192192

193-
GraphQL is known for it's "Ask for what you want” tagline, which is why it requires explicitly listing each field you want. There's no built-in way to fetch all available fields automatically.
193+
GraphQL is known for its "Ask for what you want” tagline, which is why it requires explicitly listing each field you want. There's no built-in way to fetch all available fields automatically.
194194

195195
- When querying GraphQL APIs, always think of querying only the fields that will actually be used.
196196
- Make sure queries only fetch as many entities as you actually need. 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. This applies not just to top-level collections in a query, but even more so to nested collections of entities.
@@ -301,7 +301,7 @@ query GetTokensandCounters {
301301
const { result: { tokens, counters } } = execute(query)
302302
```
303303

304-
Sending multiple queries in the same GraphQL request **improves the overall performance** by reducing the time spent on the network (saves you a round trip to the API) and will provide a **more concise implementation**.
304+
Sending multiple queries in the same GraphQL request **improves the overall performance** by reducing the time spent on the network (saves you a round trip to the API) and provides a **more concise implementation**.
305305

306306
### 6. Leverage GraphQL Fragments
307307

@@ -364,8 +364,8 @@ When using the types generation tool, the above query will generate a proper `De
364364

365365
### Do's and Don'ts for Fragments
366366

367-
1. Fragments cannot be based on a non-applicable types (on type not having fields)
368-
2. `BigInt` cannot be used as a fragment's base because it's a **scalar** (native "plain" type)
367+
1. Fragments cannot be based on a non-applicable types (types without fields).
368+
2. `BigInt` cannot be used as a fragment's base because it's a **scalar** (native "plain" type).
369369

370370
Example:
371371

@@ -406,9 +406,9 @@ fragment VoteItem on Vote {
406406

407407
---
408408

409-
### How-to Define `Fragment` as an Atomic Business Unit of Data
409+
### How to Define `Fragment` as an Atomic Business Unit of Data
410410

411-
> For most use-case, defining one fragment per type (in the case of repeated fields usage or type generation) is enough.
411+
> For most use-cases, defining one fragment per type (in the case of repeated fields usage or type generation) is enough.
412412
413413
Here is a rule of thumb for using fragments:
414414

@@ -476,19 +476,19 @@ GraphQL plugins streamline your workflow by offering real-time feedback while yo
476476

477477
1. VS Code
478478

479-
Install the [GraphQL VSCode extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to unlock:
479+
Install the [GraphQL VS Code extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to unlock:
480480

481481
- Syntax highlighting
482482
- Autocomplete suggestions
483483
- Validation against schema
484484
- Snippets
485485
- Go to definition for fragments and input types
486486

487-
If you are using `graphql-eslint`, use the [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to visualize errors and warnings inlined in your code correctly.
487+
If you are using `graphql-eslint`, use the [ESLint VS Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to visualize errors and warnings inlined in your code correctly.
488488

489-
2. WebStorm/Intellij and GraphQL\*\*
489+
2. WebStorm/Intellij and GraphQL
490490

491-
Install the [JS GraphQL plugin](https://plugins.jetbrains.com/plugin/8097-graphql/). It significantly improves your experience while working with GraphQL by providing:
491+
Install the [JS GraphQL plugin](https://plugins.jetbrains.com/plugin/8097-graphql/). It significantly improves the experience of working with GraphQL by providing:
492492

493493
- Syntax highlighting
494494
- Autocomplete suggestions

0 commit comments

Comments
 (0)