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: content/graphql/quick-start.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ Nest offers two ways of building GraphQL applications, the **code first** and th
20
20
21
21
In the **code first** approach, you use decorators and TypeScript classes to generate the corresponding GraphQL schema. This approach is useful if you prefer to work exclusively with TypeScript and avoid context switching between language syntaxes.
22
22
23
-
In the **schema first** approach, the source of truth is a GraphQL SDL (Schema Definition Language) SDL is a language-agnostic way to share schema files between different platforms. Nest automatically generates your TypeScript definitions based on the GraphQL schemas (using either classes or interfaces) to reduce redundancy.
23
+
In the **schema first** approach, the source of truth is GraphQL SDL (Schema Definition Language) files. SDL is a language-agnostic way to share schema files between different platforms. Nest automatically generates your TypeScript definitions based on the GraphQL schemas (using either classes or interfaces) to reduce redundancy.
24
24
25
25
#### Getting started with GraphQL & TypeScript
26
26
@@ -63,9 +63,9 @@ As mentioned, these options will be forwarded to the `ApolloServer` constructor.
63
63
64
64
#### GraphQL playground
65
65
66
-
The playground is a graphical, interactive, in-browser GraphQL IDE, available by default on the same URL as the GraphQL server itself. To access the playground, you need a basic GraphQL server configured and running. To see it now, you can install the [working example here](https://github.com/nestjs/nest/tree/master/sample/12-graphql-schema-first). Alternatively, if you're following along with these code samples, once you've complete the steps in the [Resolvers chapter](/graphql/resolvers-map), you can access the playground.
66
+
The playground is a graphical, interactive, in-browser GraphQL IDE, available by default on the same URL as the GraphQL server itself. To access the playground, you need a basic GraphQL server configured and running. To see it now, you can install and build the [working example here](https://github.com/nestjs/nest/tree/master/sample/12-graphql-schema-first). Alternatively, if you're following along with these code samples, once you've complete the steps in the [Resolvers chapter](/graphql/resolvers-map), you can access the playground.
67
67
68
-
With that in place, and with your application running in the background, open your web browser and navigate to `http://localhost:3000/graphql` (host and port may vary depending on your configuration). You should see the GraphQL playground, as shown below.
68
+
With that in place, and with your application running in the background, you can then open your web browser and navigate to `http://localhost:3000/graphql` (host and port may vary depending on your configuration). You will then see the GraphQL playground, as shown below.
69
69
70
70
<figure>
71
71
<imgsrc="/assets/playground.png"alt="" />
@@ -85,7 +85,7 @@ GraphQLModule.forRoot({
85
85
86
86
In the **code first** approach, you use decorators and TypeScript classes to generate the corresponding GraphQL schema.
87
87
88
-
To use the code first approach, start by adding the `autoSchemaFile` property to the options object.
88
+
To use the code first approach, start by adding the `autoSchemaFile` property to the options object:
89
89
90
90
```typescript
91
91
GraphQLModule.forRoot({
@@ -101,7 +101,7 @@ GraphQLModule.forRoot({
101
101
}),
102
102
```
103
103
104
-
A fully working sample is available [here](https://github.com/nestjs/nest/tree/master/sample/23-graphql-code-first).
104
+
A fully working code first sample is available [here](https://github.com/nestjs/nest/tree/master/sample/23-graphql-code-first).
105
105
106
106
#### Schema first
107
107
@@ -113,9 +113,9 @@ GraphQLModule.forRoot({
113
113
}),
114
114
```
115
115
116
-
The `typePaths` property indicates where the `GraphQLModule` should look for GraphQL SDL schema definition files. These files will be combined in memory; this allows you to split your schemas into several files and locate them near their resolvers.
116
+
The `typePaths` property indicates where the `GraphQLModule` should look for GraphQL SDL schema definition files you'll be writing. These files will be combined in memory; this allows you to split your schemas into several files and locate them near their resolvers.
117
117
118
-
You will typically need to have TypeScript definitions (classes and interfaces) that correspond to GraphQL types. Creating the corresponding TypeScript definitions is redundant and tedious. It leaves us without a single source of truth -- each change made within SDL forces us to adjust TypeScript definitions as well. To address this, the `@nestjs/graphql` package can automatically generate TypeScript definitions from the abstract syntax tree ([AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree)). To enable this feature, add the `definitions` options property when configuring the `GraphQLModule`.
118
+
You will typically also need to have TypeScript definitions (classes and interfaces) that correspond to the GraphQL SDL types. Creating the corresponding TypeScript definitions by hand is redundant and tedious. It leaves us without a single source of truth -- each change made within SDL forces us to adjust TypeScript definitions as well. To address this, the `@nestjs/graphql` package can automatically generate TypeScript definitions from the abstract syntax tree ([AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree)). To enable this feature, add the `definitions` options property when configuring the `GraphQLModule`.
119
119
120
120
```typescript
121
121
GraphQLModule.forRoot({
@@ -126,7 +126,7 @@ GraphQLModule.forRoot({
126
126
}),
127
127
```
128
128
129
-
The path property of the `definitions` object (e.g., `src/graphql.ts` above) indicates where to save generated TypeScript output. By default, all types are generated as interfaces. To generate classes instead, specify the `outputAs` property with a value of `'class'`.
129
+
The path property of the `definitions` object indicates where to save generated TypeScript output. By default, all generated TypeScript types are created as interfaces. To generate classes instead, specify the `outputAs` property with a value of `'class'`.
130
130
131
131
```typescript
132
132
GraphQLModule.forRoot({
@@ -138,7 +138,7 @@ GraphQLModule.forRoot({
138
138
}),
139
139
```
140
140
141
-
The above approach dynamically generates type definitions each time the application starts. Alternatively, it may be preferable to build a simple script to generate these on demand. For example, assume we create the following script as `generate-typings.ts`:
141
+
The above approach dynamically generates TypeScript definitions each time the application starts. Alternatively, it may be preferable to build a simple script to generate these on demand. For example, assume we create the following script as `generate-typings.ts`:
Copy file name to clipboardExpand all lines: content/graphql/resolvers-map.md
+19-8Lines changed: 19 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ Resolvers provide the instructions for turning a [GraphQL](https://graphql.org/)
4
4
5
5
#### Code first
6
6
7
-
In the code first approach, we don't write GraphQL SDL by hand. Instead we use TypeScript decorators. The `@nestjs/graphql` package will then read the metadata defined through these decorators and automatically generate the schema for you.
7
+
In the code first approach, we don't create our GraphQL schema by writing GraphQL SDL by hand. Instead we use TypeScript decorators to generate the SDL from TypeScript class definitions. The `@nestjs/graphql` package reads the metadata defined through the decorators and automatically generates the schema for you.
8
8
9
9
Most of the definitions in a GraphQL schema are **object types**. Each object type you define should represent a domain object that an application client might need to interact with. For example, our sample API needs to be able to fetch a list of authors and their posts, so we should define the `Author` type and `Post` type to support this functionality.
10
10
@@ -43,11 +43,20 @@ export class Author {
43
43
44
44
> info **Hint** TypeScript's metadata reflection system has several limitations which make it impossible to, for instance, determine what properties a class consists of or recognize whether a given property is optional or required. Because of these limitations, we must either explicitly use the `@Field` decorator in our schema definition classes, or use a [CLI plugin](/graphql/resolvers#cli-plugin) to generate these for us.
45
45
46
-
The `Author` object type, like any class, is made of a collection of fields, with each field declaring a type. The types correspond to [GraphQL types](https://graphql.org/learn/schema/). A field's GraphQL type can be either an object type or a scalar type. A scalar type is a primitive (like `ID`, `String`, `Boolean`, or `Int`) that resolves to a single value.
46
+
The `Author` object type, like any class, is made of a collection of fields, with each field declaring a type. The types correspond to [GraphQL types](https://graphql.org/learn/schema/). A field's GraphQL type can be either an object type or a scalar type. A GraphQL scalar type is a primitive (like `ID`, `String`, `Boolean`, or `Int`) that resolves to a single value.
47
47
48
48
> info **Hint** In addition to GraphQL's built-in scalar types, you can define custom scalar types.
49
49
50
-
The above `Author` object type definition will generate the SDL we showed above.
50
+
The above `Author` object type definition will cause Nest to **generate** the SDL we showed above:
51
+
52
+
```graphql
53
+
typeAuthor {
54
+
id: Int!
55
+
firstName: String
56
+
lastName: String
57
+
posts: [Post]
58
+
}
59
+
```
51
60
52
61
The `@Field()` decoratoracceptsatypefunction (e.g., `type => Int`), andoptionallyanobjectwiththefollowingkeys:
Asmentionedinthe [previous](/graphql/quick-start) chapter, intheschema first approach we manually define our types in SDL (read [more](http://graphql.org/learn/schema/#type-language)). Consider the following type definitions:
270
+
Asmentionedinthe [previous](/graphql/quick-start) chapter, intheschema first approach we start by manually defining schema types in SDL (read [more](http://graphql.org/learn/schema/#type-language)). Consider the following type definitions:
262
271
263
272
```graphql
264
273
type Author {
@@ -279,7 +288,7 @@ type Query {
279
288
}
280
289
```
281
290
282
-
Thisschema exposes a single query - `author(id: Int!): Author`. Let's create an `AuthorResolver` class that resolves author queries:
291
+
Thisschema exposes a single query - `author(id: Int!): Author`. Let's now create an `AuthorResolver` class that resolves author queries:
283
292
284
293
```typescript
285
294
@Resolver('Author')
@@ -330,7 +339,7 @@ In the above examples, the `@Query()` and `@ResolveField()` decorators are assoc
330
339
}
331
340
```
332
341
333
-
This generates the resolver map entry for the author query in our schema (because the method name `author` matches the `author` field in the `Query` type):
342
+
This generates the resolver map entry for the author query in our schema (the query type entry uses the same name as the method name):
334
343
335
344
```graphql
336
345
typeQuery {
@@ -461,6 +470,8 @@ The `GraphQLModule` will take care of reflecting the metadata and transforming c
461
470
462
471
> info **Hint** Learn more about GraphQL queries [here](http://graphql.org/learn/queries/).
463
472
473
+
> info **Hint** It is helpful to organize your code by what we can call your **domain model** (similar to the way you would organize entry points in a REST API). In this approach, keep your models (`ObjectType` classes), resolvers and services together within a Nest module representing the domain model. Keep all of these components in a single folder per module. When you do this, and use the [Nest CLI](/cli/overview) to generate each element, Nest will wire all of these parts together automatically for you.
474
+
464
475
#### CLI Plugin
465
476
466
477
TypeScript's metadata reflection system has several limitations which make it impossible to, for instance, determine what properties a class consists of or recognize whether a given property is optional or required. However, some of these constraints can be addressed at compilation time. Nest provides a plugin that enhances the TypeScript compilation process to reduce the amount of boilerplate code required.
@@ -475,7 +486,7 @@ The GraphQL plugin will automatically:
475
486
476
487
Please, note that your filenames **must have** one of the following suffixes: `['.input.ts', '.args.ts', '.entity.ts']` (e.g., `author.entity.ts`) in order to be analyzed by the plugin.
477
488
478
-
Previously, you had to duplicate a lot of code to let the package know how your type should be declared in GraphQL. For example, you could define a simple `Author` class as follows:
489
+
With what we've learned so far, you have to duplicate a lot of code to let the package know how your type should be declared in GraphQL. For example, you could define a simple `Author` class as follows:
0 commit comments