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: src/pages/learn/queries.mdx
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -8,15 +8,15 @@ GraphQL supports three main operation types—queries, mutations, and subscripti
8
8
9
9
## Fields
10
10
11
-
At its simplest, GraphQL is about asking for specific [fields](https://spec.graphql.org/draft/#sec-Language.Fields) on objects. Let's start by looking at a simple query for a`hero` field that's defined on the `Query` type in the schema:
11
+
At its simplest, GraphQL is about asking for specific [fields](https://spec.graphql.org/draft/#sec-Language.Fields) on objects. Let's start by looking at the`hero` field that's defined on the `Query` type in the schema:
12
12
13
13
```graphql
14
14
typeQuery {
15
15
hero: Character
16
16
}
17
17
```
18
18
19
-
Wecanseewhattheresultwegetwhenwerunit:
19
+
Wecanseewhatresultwegetwhenwequeryit:
20
20
21
21
```graphql
22
22
# { "graphiql": true }
@@ -27,7 +27,7 @@ We can see what the result we get when we run it:
27
27
}
28
28
```
29
29
30
-
When creating a GraphQL _document_ we always start with a [root operation type](/learn/schema/#the-query-mutation-and-subscription-types) (the `Query` Object type for this example) because it serves as an entry point to the API. From there we must specify the _selection set_ of fields all the way down to their leaf values, which will be Scalar or Enum types. The field `name` returns a `String` type, in this case the name of the main hero of Star Wars, `"R2-D2"`.
30
+
When creating a GraphQL _document_ we always start with a [root operation type](/learn/schema/#the-query-mutation-and-subscription-types) (the `Query` Object type for this example) because it serves as an entry point to the API. From there we must specify the _selection set_ of fields we are interested in, all the way down to their leaf values which will be Scalar or Enum types. The field `name` returns a `String` type, in this case the name of the main hero of Star Wars, `"R2-D2"`.
31
31
32
32
The GraphQL specification indicates that a request's result will be returned on a top-level `data` key in the response. If the request raised any errors, there will be information about what went wrong on a top-level `errors` key. From there, you can see that the result has the same shape as the query. This is essential to GraphQL, because you always get back what you expect, and the server knows exactly what fields the client is asking for.
33
33
@@ -73,7 +73,7 @@ The client must then provide the required `id` value with the query:
73
73
74
74
In a system like REST, you can only pass a single set of arguments—the query parameters and URL segments in your request. But in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches.
75
75
76
-
You can even pass arguments into fields that output Scalar types, to implement data transformations once on the server, instead of on every client separately:
76
+
You can even pass arguments into fields that output Scalar types; one use case for this would be to implement data transformations once on the server, instead of on every client separately:
77
77
78
78
```graphql
79
79
# { "graphiql": true }
@@ -91,7 +91,7 @@ Arguments can be of many different types. In the above example, we have used an
91
91
92
92
## Operation type and name
93
93
94
-
In the examples above we have been using a shorthand syntax where we omit the `query` keyword before the operation's selection set. In addition to specifying the _operation type_ explicitly, we can also add a unique _operation name_, which is useful in production apps because it makes our code less ambiguous.
94
+
In the examples above we have been using a shorthand syntax where we omit the `query` keyword before the operation's selection set. In addition to specifying the _operation type_ explicitly, we can also add a unique _operation name_, which is useful in production apps because it makes debugging and tracing easier.
95
95
96
96
Here’s an example that includes the `query` keyword as the operation type and `HeroNameAndFriends` as the operation name:
97
97
@@ -107,9 +107,9 @@ query HeroNameAndFriends {
107
107
}
108
108
```
109
109
110
-
The operation type is either `query`, `mutation`, or `subscription` and describes what type of operation you intend to do. This keyword is required unless you're using the shorthand syntax for queries, and it is always required for mutations and subscriptions. Additionally, if you wish to provide a name for your operation, then you must specify the operation type as well.
110
+
The operation type is either `query`, `mutation`, or `subscription` and describes what type of operation you intend to do. This keyword is required unless you're using the shorthand syntax for queries (it is always required for mutations and subscriptions). Additionally, if you wish to provide a name for your operation, then you must specify the operation type as well.
111
111
112
-
The operation name is a meaningful and explicit name for your operation. It is only required when sending multiple operations in one document, but it's encouraged because operation names are helpful for debugging and server-side logging. When something goes wrong (you see errors either in your network logs or in the logs of your GraphQL server) it is easier to identify a query in your codebase by name instead of trying to decipher the contents.
112
+
The operation name is an explicit name that you assign to your operation; you should pick a meaningful name. It is required when sending multiple operations in one document, but even if you're only sending one operation it's encouraged because operation names are helpful for debugging and server-side logging. When something goes wrong (you see errors either in your network logs or in the logs of your GraphQL server) it is easier to identify a query in your codebase by name instead of trying to decipher the contents.
113
113
114
114
Think of this just like a function name in your favorite programming language. For example, in JavaScript, we can easily work only with anonymous functions, but when we give a function a name, it's easier to track it down, debug our code, and log when it's called. In the same way, GraphQL query and mutation names, along with fragment names, can be a useful debugging tool on the server side to identify different GraphQL requests.
115
115
@@ -192,7 +192,7 @@ When default values are provided for all variables, you can call the query witho
192
192
193
193
## Fragments
194
194
195
-
Let's say we have a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated because we would need to repeat the fields at least once—one for each side of the comparison.
195
+
Let's say we have a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated because we would need to repeat the fields at least once—one for each side of the comparison.
196
196
197
197
That's why GraphQL includes reusable units called [fragments](https://spec.graphql.org/draft/#sec-Language.Fragments). Fragments let you construct sets of fields, and then include them in queries where needed. Here's an example of how you could solve the above situation using fragments:
198
198
@@ -216,7 +216,7 @@ fragment comparisonFields on Character {
216
216
}
217
217
```
218
218
219
-
You can see how the above query would be pretty repetitive if the fields were repeated. The concept of fragments is frequently used to split complicated application data requirements into smaller chunks, especially when you need to combine many UI components with different fragments into one initial data fetch.
219
+
You can see how the above query would be pretty repetitive if we weren't able to use fragments. The concept of fragments is frequently used to split complicated application data requirements into smaller chunks, especially when you need to combine many UI components with different fragments into one initial data fetch.
220
220
221
221
### Using variables inside fragments
222
222
@@ -299,7 +299,7 @@ GraphQL allows you to request `__typename`, a meta field, at any point in a quer
299
299
300
300
In the above query, `search` returns a Union type that can be one of three options. Without the `__typename` field, it would be impossible for a client to tell the different types apart.
301
301
302
-
GraphQL services provide a few more meta fields, the rest of which are used to expose the [introspection](/learn/introspection) system.
302
+
All field names beginning with two underscores (`__`) are reserved by GraphQL. In addition to`__typename`, GraphQL services provide the `__schema` and `__type` meta-fields which expose the [introspection](/learn/introspection) system.
303
303
304
304
## Directives
305
305
@@ -340,11 +340,11 @@ To recap what we've learned about queries:
340
340
- Fields can accept arguments that alter the output of that field
341
341
- Operations can use the `query`, `mutation`, or `subscription` keyword to indicate their type
342
342
- The operation type keyword can be omitted for certain query operations only
343
-
- Operations can be given unique names, which can make code more expressive and help with debugging
343
+
- Operations should be given unique names, which make requests more expressive and help with debugging
344
344
- Field aliases allow you to rename response keys, include the same field multiple times in the same query, and provide different arguments to the aliased fields
345
345
- Variables are preceded by the `$` character and can be used to provide dynamic values to field arguments
346
346
- A fragment is a reusable selection set of fields that can be used as needed in multiple queries
347
347
- Executable directive can be applied to queries to change the result of a GraphQL query when it's executed on the server
348
348
- All spec-compliant GraphQL servers include the `@include` and `@skip` built-in directives
349
349
350
-
Not that we understand ins and outs of how to read data from a GraphQL server with query operations, so it's time to learn how to write data as well using [mutations](/learn/mutations/).
350
+
Now that we understand the ins and outs of how to read data from a GraphQL server with query operations, it's time to learn how to change data and trigger side effects using [mutations](/learn/mutations/).
0 commit comments