diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md index 449141e4469c9..e7b929caafea1 100644 --- a/examples/api-routes-graphql/README.md +++ b/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 diff --git a/examples/api-routes-graphql/package.json b/examples/api-routes-graphql/package.json index e4329bea00b67..625175f3fa9a5 100644 --- a/examples/api-routes-graphql/package.json +++ b/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", diff --git a/examples/api-routes-graphql/pages/api/graphql.js b/examples/api-routes-graphql/pages/api/graphql.js index 0a29f3ce88987..33a150bac94e3 100644 --- a/examples/api-routes-graphql/pages/api/graphql.js +++ b/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