refactor(examples/with-typescript-graphql): use codegen TypedDocumentNode and GraphQL Yoga for better DX and smaller bundle size (#36240)

Improve the Next.js with TypeScript + GraphQL example:

- [x] use GraphQL Code Generator instead of `graphql-let`: more widespread tool and smaller bundle size (types only generation vs code generation)
- [x] use GraphQL Yoga instead of Apollo Server Micro: for lighter bundle size as [stated here](#36155)
- [x] introduces GraphQL Code Generator on the API side for Resolvers typing

Co-authored-by: JJ Kasper <[email protected]>

Author: charlypoly

examples/with-typescript-graphql/.babelrc

@@ -38,3 +38,6 @@ yarn-error.log*
 *.graphql.d.ts
 *.graphqls.d.ts
 .cache
+
+lib/resolvers-types.ts
+lib/graphql-operations.ts

examples/with-typescript-graphql/.gitignore

@@ -2,21 +2,22 @@
 
 One of the strengths of GraphQL is [enforcing data types on runtime](https://graphql.github.io/graphql-spec/June2018/#sec-Value-Completion). Further, TypeScript and [GraphQL Code Generator](https://graphql-code-generator.com/) (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
 
-This template extends [Apollo Server and Client Example](https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client#readme) by rewriting in TypeScript and integrating [graphql-let](https://github.com/piglovesyou/graphql-let#readme), which runs [TypeScript React Apollo](https://graphql-code-generator.com/docs/plugins/typescript-react-apollo) in [graphql-codegen](https://github.com/dotansimha/graphql-code-generator#readme) under the hood. It enhances the typed GraphQL use as below:
+This template gives you the best start to use GraphQL with fully typed queries (client-side) and resolvers (server-side), all this with minimum bundle size 📦
 
 ```tsx
-import { useNewsQuery } from './news.graphql'
+import { useQuery } from '@apollo/client'
+import { ViewerDocument } from 'lib/graphql-operations'
 
 const News = () => {
-	// Typed already️⚡️
-	const { data: { news } } = useNewsQuery()
+  // Typed already️⚡️
+  const {
+    data: { viewer },
+  } = useQuery(ViewerDocument)
 
-	return <div>{news.map(...)}</div>
+  return <div>{viewer.name}</div>
 }
 ```
 
-By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` are consistent.
-
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-typescript-graphql)

examples/with-typescript-graphql/.graphql-let.yml

@@ -0,0 +1,14 @@
+schema:
+  - 'lib/schema.ts':
+      noRequire: true
+documents: ./lib/documents/*.graphql
+generates:
+  ./lib/graphql-operations.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node
+  ./lib/resolvers-types.ts:
+    plugins:
+      - typescript
+      - typescript-resolvers

examples/with-typescript-graphql/README.md

@@ -5,6 +5,8 @@ import {
   InMemoryCache,
   NormalizedCacheObject,
 } from '@apollo/client'
+import resolvers from './resolvers'
+import typeDefs from './schema'
 
 let apolloClient: ApolloClient<NormalizedCacheObject> | undefined
 
@@ -16,7 +18,12 @@ export type ResolverContext = {
 function createIsomorphLink(context: ResolverContext = {}) {
   if (typeof window === 'undefined') {
     const { SchemaLink } = require('@apollo/client/link/schema')
-    const { schema } = require('./schema')
+    const { makeExecutableSchema } = require('@graphql-tools/schema')
+
+    const schema = makeExecutableSchema({
+      typeDefs,
+      resolvers,
+    })
     return new SchemaLink({ schema, context })
   } else {
     const { HttpLink } = require('@apollo/client')

examples/with-typescript-graphql/codegen.yml

@@ -0,0 +1,7 @@
+mutation UpdateName($name: String!) {
+  updateName(name: $name) {
+    id
+    name
+    status
+  }
+}

examples/with-typescript-graphql/graphql.d.ts

@@ -0,0 +1,11 @@
+query Viewer {
+  viewer {
+    ...Partial
+    status
+  }
+}
+
+fragment Partial on User {
+  id
+  name
+}