feat(examples): refactor api-routes-graphql to GraphQL Yoga (#36155)

GraphQL Yoga provides a more extensible experience ([Envelop plugins](https://envelop.dev/)) and lighter bundle than the previously showcased `apollo-server-micro` ([64.5kB](https://bundlephobia.com/package/@graphql-yoga/node@2.2.1) vs [196.2kB](https://bundlephobia.com/package/apollo-server-micro@3.6.7) - min & GZiped)

Similar to Next.js, GraphQL Yoga comes with strong defaults and out-of-the-box support for modern GraphQL features (File uploads, subscriptions, and more).

Strong of many years of existence and a large community, GraphQL Yoga 2.0 comes with Next.js support with no additional package or configuration 📦 

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

Author: charlypoly

examples/api-routes-graphql/README.md

@@ -1,6 +1,23 @@
 # API routes with GraphQL server
 
-Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/main/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app.
+Next.js ships with [API routes](https://nextjs.org/docs/api-routes/introduction), which provide an easy solution to build your own `API`.
+This example showcases how to build a lightweight and blazing fast GraphQL API with minimum configuration using GraphQL Yoga.
+
+GraphQL Yoga comes with strong defaults:
+
+- CORS is enabled by default
+- Automatically masking unexpected errors and preventing sensitive information from leaking to clients.
+- Shipped with GraphiQL
+
+Yoga also brings support (with no additional dependency) for subscriptions, file uploads, and your favorite schema-building library (GraphQL Tools, Pothos, Nexus, TypeGraphQL, SDL first schema-design approaches, graphql-js, Apollo Tools).
+
+More information on all available features are available [on the official documentation](https://www.graphql-yoga.com/docs/quick-start).
+
+Finally, GraphQL Yoga is built on top of Envelop. Envelop is a library that helps build GraphQL API faster and flexibly with plugin-based architecture.
+
+Similar to Express middlewares allowing you to customize requests' behavior, Envelop applies the same idea to GraphQL requests.
+
+More information on [Envelop documentation](https://www.envelop.dev/).
 
 ## Deploy your own
 

examples/api-routes-graphql/package.json

@@ -6,9 +6,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "apollo-server-micro": "^3.0.1",
-    "graphql": "^15.5.1",
-    "micro": "^9.3.4",
+    "@graphql-yoga/node": "^2.2.1",
+    "graphql": "^16.3.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

examples/api-routes-graphql/pages/api/graphql.js

@@ -1,6 +1,6 @@
-import { ApolloServer, gql } from 'apollo-server-micro'
+import { createServer } from '@graphql-yoga/node'
 
-const typeDefs = gql`
+const typeDefs = /* GraphQL */ `
   type Query {
     users: [User!]!
   }
@@ -17,33 +17,13 @@ const resolvers = {
   },
 }
 
-const apolloServer = new ApolloServer({ typeDefs, resolvers })
-
-const startServer = apolloServer.start()
-
-export default async function handler(req, res) {
-  res.setHeader('Access-Control-Allow-Credentials', 'true')
-  res.setHeader(
-    'Access-Control-Allow-Origin',
-    'https://studio.apollographql.com'
-  )
-  res.setHeader(
-    'Access-Control-Allow-Headers',
-    'Origin, X-Requested-With, Content-Type, Accept'
-  )
-  if (req.method === 'OPTIONS') {
-    res.end()
-    return false
-  }
-
-  await startServer
-  await apolloServer.createHandler({
-    path: '/api/graphql',
-  })(req, res)
-}
-
-export const config = {
-  api: {
-    bodyParser: false,
+const server = createServer({
+  schema: {
+    typeDefs,
+    resolvers,
   },
-}
+  endpoint: '/api/graphql',
+  // graphiql: false // uncomment to disable GraphiQL
+})
+
+export default server