Tutorial updates (dotansimha#3451)

* Tutorial updates

website/route-lockfile.txt

@@ -18,10 +18,13 @@
 /docs/features/health-check
 /docs/features/introspection
 /docs/features/jwt
+/docs/features/landing-page
 /docs/features/logging-and-debugging
+/docs/features/monitoring
 /docs/features/parsing-and-validation-caching
 /docs/features/persisted-operations
 /docs/features/request-batching
+/docs/features/request-customization
 /docs/features/response-caching
 /docs/features/schema
 /docs/features/sofa-api
@@ -52,6 +55,7 @@
 /docs/quick-start -> /docs
 /docs/testing -> /docs/features/testing
 /examples/graphql-ws -> /docs/features/subscriptions
+/features/graphiql -> /docs/features/graphiql
 /tutorial -> /tutorial/basic
 /tutorial/advanced/00-introduction
 /tutorial/advanced/01-authentication
@@ -69,15 +73,22 @@
 /tutorial/basic/08-graph-relations
 /tutorial/basic/09-error-handling
 /tutorial/basic/10-filtering-and-pagination
-/tutorial/basic/11-summary
+/tutorial/basic/11-setting-up-graphql-code-generator
+/tutorial/basic/12-summary
 /v2
 /v2/features/apollo-federation
+/v2/features/automatic-persisted-queries -> /v2
 /v2/features/context
 /v2/features/cors
+/v2/features/defer-stream -> /v2
 /v2/features/envelop-plugins
 /v2/features/error-masking
 /v2/features/file-uploads
 /v2/features/graphiql
+/v2/features/health-check -> /v2
+/v2/features/introspection -> /v2
+/v2/features/persisted-operations -> /v2
+/v2/features/response-caching -> /v2
 /v2/features/subscriptions
 /v2/features/testing
 /v2/integrations/integration-with-aws-lambda

website/src/pages/tutorial/basic/05-a-simple-mutation.mdx

@@ -13,7 +13,7 @@ Like before, you need to start by adding the new operation to your GraphQL schem
 
 In `src/schema.ts`, extend the schema definition as follows:
 
-```ts filename="src/schema.ts"
+```ts filename="src/schema.ts" {7-9}
 const typeDefinitions = /* GraphQL */ `
   type Query {
     info: String!
@@ -39,7 +39,7 @@ function for the new field.
 
 Next, update the `resolvers` functions to look as follows:
 
-```ts
+```ts filename="src/schema.ts" {20-36}
 type Link = {
   id: string
   url: string
@@ -75,6 +75,11 @@ const resolvers = {
 
       return link
     }
+  },
+  Link: {
+    id: (parent: Link) => parent.id,
+    description: (parent: Link) => parent.description,
+    url: (parent: Link) => parent.url
   }
 }
 ```

website/src/pages/tutorial/basic/07-connecting-server-and-database.mdx

@@ -46,7 +46,7 @@ export async function createContext(): Promise<GraphQLContext> {
 Now, you'll need to import the `createContext` function and make sure you add it as part of the
 GraphQL execution process:
 
-```typescript filename="src/main.ts"
+```typescript filename="src/main.ts" {3,7}
 import { createServer } from 'http'
 import { createYoga } from 'graphql-yoga'
 import { createContext } from './context'
@@ -73,7 +73,7 @@ global connection, and making it available as part of your GraphQL `context`.
 Also, modify the GraphQL execution and add our `prisma` connection to the GraphQL execution
 `context`:
 
-```ts filename="src/context.ts"
+```ts filename="src/context.ts" {1-3,6,10}
 import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
@@ -114,11 +114,15 @@ database instead of local dummy data.
 
 In `src/schema.ts`, update the `resolvers` object and change imports to look as follows:
 
-```ts filename="src/schema.ts"
+```ts filename="src/schema.ts" {2-3,12-14,22-34}
 import { createSchema } from 'graphql-yoga'
 import type { Link } from '@prisma/client'
 import type { GraphQLContext } from './context'
 
+const typeDefs = /* GraphQL */ `
+  ...
+`
+
 const resolvers = {
   Query: {
     info: () => `This is the API of a Hackernews Clone`,

website/src/pages/tutorial/basic/08-graph-relations.mdx

@@ -26,7 +26,7 @@ that `Comments`s are _posted_ on `Links`s.
 Open `prisma/schema.prisma` and add the following code, making sure to also update your existing
 `Link` model accordingly:
 
-```prisma filename="prisma/schema.prisma"
+```prisma filename="prisma/schema.prisma" {6,9-14}
 model Link {
   id          Int      @id @default(autoincrement())
   createdAt   DateTime @default(now())
@@ -38,8 +38,8 @@ model Link {
 model Comment {
   id        Int      @id @default(autoincrement())
   body      String
-  link      Link?    @relation(fields: [linkId], references: [id])
-  linkId    Int?
+  link      Link     @relation(fields: [linkId], references: [id])
+  linkId    Int
 }
 ```
 
@@ -95,18 +95,7 @@ In this case, you first want a way of creating a comment using a mutation field
 (`Mutation.postCommentOnLink`) and also fetching a comment via its id using a query field
 (`Query.comment`).
 
-```graphql
-type Link {
-  id: ID!
-  description: String!
-  url: String!
-}
-
-type Comment {
-  id: ID!
-  body: String!
-}
-
+```graphql {4,9,18-21}
 type Query {
   info: String!
   feed: [Link!]!
@@ -117,6 +106,17 @@ type Mutation {
   postLink(url: String!, description: String!): Link!
   postCommentOnLink(linkId: ID!, body: String!): Comment!
 }
+
+type Link {
+  id: ID!
+  description: String!
+  url: String!
+}
+
+type Comment {
+  id: ID!
+  body: String!
+}
 ```
 
 ## Implementing the GraphQL Field Resolvers
@@ -371,7 +371,7 @@ schema.
 
 Add the `Link.comments` field to the GraphQL schema definition.
 
-```graphql
+```graphql {5}
 type Link {
   id: ID!
   description: String!
@@ -460,7 +460,7 @@ type Comment {
 }
 
 type Query {
-  link(id: ID): Link
+  link(id: ID!): Link
 }
 ```
 

website/src/pages/tutorial/basic/09-error-handling.mdx

@@ -23,14 +23,14 @@ const resolvers = {
       args: { linkId: string; body: string },
       context: GraphQLContext
     ) {
-      const comment = await context.prisma.comment.create({
+      const newComment = await context.prisma.comment.create({
         data: {
-          body: args.body,
           linkId: parseInt(args.linkId)
+          body: args.body,
         }
       })
 
-      return comment
+      return newComment
     }
   }
 }
@@ -152,7 +152,7 @@ const resolvers = {
       args: { linkId: string; body: string },
       context: GraphQLContext
     ) {
-      const comment = await context.prisma.comment
+      const newComment = await context.prisma.comment
         .create({
           data: {
             body: args.body,
@@ -168,7 +168,7 @@ const resolvers = {
           return Promise.reject(err)
         })
 
-      return comment
+      return newComment
     }
   }
 }
@@ -327,7 +327,7 @@ string contents using a regex.
 
 Add the following code to the `src/schema.ts` file.
 
-```ts filename="src/schema.ts"
+```ts filename="src/schema.ts" {5-10,21-26}
 // ... other code ...
 import { GraphQLError } from 'graphql'
 import { Prisma } from '@prisma/client'
@@ -355,11 +355,11 @@ const resolvers = {
         )
       }
 
-      const comment = await context.prisma.comment
+      const newComment = await context.prisma.comment
         .create({
           data: {
-            body: args.body,
-            linkId
+            linkId,
+            body: args.body
           }
         })
         .catch((err: unknown) => {
@@ -374,7 +374,7 @@ const resolvers = {
           }
           return Promise.reject(err)
         })
-      return comment
+      return newComment
     }
   }
 }

website/src/pages/tutorial/basic/10-filtering-and-pagination.mdx

@@ -77,15 +77,11 @@ query {
     id
     description
     url
-    postedBy {
-      id
-      name
-    }
   }
 }
 ```
 
-![sample query](https://i.imgur.com/tICYe2e.png)
+![sample query](https://i.imgur.com/qODhFPW.png)
 
 ## Pagination
 
@@ -131,7 +127,7 @@ Now, adjust the field resolver function implementation:
 
 And now adjust the implementation of the `Query.feed` resolver function:
 
-```ts filename="src/schema.ts"
+```ts filename="src/schema.ts" {7,20-21}
 const resolvers = {
   // ... other resolvers maps ...
   Query: {
@@ -177,7 +173,7 @@ query {
 }
 ```
 
-![test the pagination API ](https://i.imgur.com/XeZgSJo.png)
+![test the pagination API ](https://i.imgur.com/VZzIeyJ.png)
 
 ## Pagination Field Argument Sanitization
 
@@ -200,7 +196,7 @@ Fetching 0 records does not make sense.
 
 Adjust the current schema resolver implementation according to the following.
 
-```ts filename="src/schema.ts"
+```ts filename="src/schema.ts" {4-11,31-35,40}
 // ... other code ...
 import { GraphQLError } from 'graphql'
 

website/src/pages/tutorial/basic/11-setting-up-graphql-code-generator.mdx

@@ -70,10 +70,10 @@ const config: CodegenConfig = {
   generates: {
     'src/schema': defineConfig({
       // (3)
-      resolverGeneration: 'minimal' // (4)
+      resolverGeneration: 'minimal', // (4)
       typesPluginsConfig: {
-        contextType: "../context#GraphQLContext", // (5)
-      },
+        contextType: '../context#GraphQLContext' // (5)
+      }
     })
   }
 }
@@ -156,7 +156,7 @@ export const feed: NonNullable<QueryResolvers['feed']> = async (_parent, _arg, _
 It should be trivial to bring the existing logic over:
 
 ```ts filename="src/schema/base/resolvers/Query/feed.ts"
-export const feed: NonNullable<QueryResolvers['feed']> = async (_parent, _arg, context) => {
+export const feed: NonNullable<QueryResolvers['feed']> = async (_parent, args, context) => {
   const where = args.filterNeedle
     ? {
         OR: [

website/src/pages/tutorial/basic/12-summary.mdx

@@ -7,8 +7,8 @@ description: Learn how to build a HackerNews clone GraphQL server from scratch u
 In this tutorial, you learned how to build a simple HackerNews clone GraphQL server from scratch
 using GraphQL Yoga!
 
-You can find the code of full
-[code of the tutorial on GitHub](https://github.com/dotansimha/graphql-yoga/tree/main/examples/hackernews).
+You can find the full code of
+[the tutorial on GitHub](https://github.com/dotansimha/graphql-yoga/tree/main/examples/hackernews).
 
 Congratulations on completing the tutorial! We can't wait to see what you build next.