Skip to content

Commit 9626dee

Browse files
committed
updates
1 parent 892c085 commit 9626dee

File tree

2 files changed

+30
-19
lines changed

2 files changed

+30
-19
lines changed

content/graphql/quick-start.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Nest offers two ways of building GraphQL applications, the **code first** and th
2020

2121
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.
2222

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

2525
#### Getting started with GraphQL & TypeScript
2626

@@ -63,9 +63,9 @@ As mentioned, these options will be forwarded to the `ApolloServer` constructor.
6363

6464
#### GraphQL playground
6565

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

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

7070
<figure>
7171
<img src="/assets/playground.png" alt="" />
@@ -85,7 +85,7 @@ GraphQLModule.forRoot({
8585

8686
In the **code first** approach, you use decorators and TypeScript classes to generate the corresponding GraphQL schema.
8787

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

9090
```typescript
9191
GraphQLModule.forRoot({
@@ -101,7 +101,7 @@ GraphQLModule.forRoot({
101101
}),
102102
```
103103

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).
105105

106106
#### Schema first
107107

@@ -113,9 +113,9 @@ GraphQLModule.forRoot({
113113
}),
114114
```
115115

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

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`.
119119

120120
```typescript
121121
GraphQLModule.forRoot({
@@ -126,7 +126,7 @@ GraphQLModule.forRoot({
126126
}),
127127
```
128128

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'`.
130130

131131
```typescript
132132
GraphQLModule.forRoot({
@@ -138,7 +138,7 @@ GraphQLModule.forRoot({
138138
}),
139139
```
140140

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`:
142142

143143
```typescript
144144
import { GraphQLDefinitionsFactory } from '@nestjs/graphql';
@@ -152,7 +152,7 @@ definitionsFactory.generate({
152152
});
153153
```
154154

155-
Now you can run this script only when needed:
155+
Now you can run this script on demand:
156156

157157
```bash
158158
$ ts-node generate-typings
@@ -171,7 +171,7 @@ definitionsFactory.generate({
171171
});
172172
```
173173

174-
A fully working sample is available [here](https://github.com/nestjs/nest/tree/master/sample/12-graphql-schema-first).
174+
A fully working schema first sample is available [here](https://github.com/nestjs/nest/tree/master/sample/12-graphql-schema-first).
175175

176176
#### Async configuration
177177

content/graphql/resolvers-map.md

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Resolvers provide the instructions for turning a [GraphQL](https://graphql.org/)
44

55
#### Code first
66

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

99
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.
1010

@@ -43,11 +43,20 @@ export class Author {
4343

4444
> 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.
4545
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.
4747

4848
> info **Hint** In addition to GraphQL's built-in scalar types, you can define custom scalar types.
4949
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+
type Author {
54+
id: Int!
55+
firstName: String
56+
lastName: String
57+
posts: [Post]
58+
}
59+
```
5160

5261
The `@Field()` decorator accepts a type function (e.g., `type => Int`), and optionally an object with the following keys:
5362

@@ -254,11 +263,11 @@ type Query {
254263
}
255264
```
256265

257-
You may also notice that such classes play very well with the `ValidationPipe` (read [more](/techniques/validation)).
266+
You may also notice that arguments classes like `GetAuthorArgs` play very well with the `ValidationPipe` (read [more](/techniques/validation)).
258267

259268
#### Schema first
260269

261-
As mentioned in the [previous](/graphql/quick-start) chapter, in the schema first approach we manually define our types in SDL (read [more](http://graphql.org/learn/schema/#type-language)). Consider the following type definitions:
270+
As mentioned in the [previous](/graphql/quick-start) chapter, in the schema 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:
262271

263272
```graphql
264273
type Author {
@@ -279,7 +288,7 @@ type Query {
279288
}
280289
```
281290

282-
This schema exposes a single query - `author(id: Int!): Author`. Let's create an `AuthorResolver` class that resolves author queries:
291+
This schema exposes a single query - `author(id: Int!): Author`. Let's now create an `AuthorResolver` class that resolves author queries:
283292

284293
```typescript
285294
@Resolver('Author')
@@ -330,7 +339,7 @@ In the above examples, the `@Query()` and `@ResolveField()` decorators are assoc
330339
}
331340
```
332341

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):
334343

335344
```graphql
336345
type Query {
@@ -461,6 +470,8 @@ The `GraphQLModule` will take care of reflecting the metadata and transforming c
461470

462471
> info **Hint** Learn more about GraphQL queries [here](http://graphql.org/learn/queries/).
463472
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+
464475
#### CLI Plugin
465476

466477
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:
475486

476487
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.
477488

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

480491
```typescript
481492
@ObjectType()

0 commit comments

Comments
 (0)