Apollo Server as Nuxt serverMiddleware

it can also be a little easier

1.

yarn add apollo-server-express

or

npm install apollo-server-express

2. create file ./server/index.js

import { ApolloServer, gql } from 'apollo-server-express'    // Construct a schema, using GraphQL schema languageconst typeDefs = gql`  type Query {    hello: String  }`// Provide resolver functions for your schema fieldsconst resolvers = {  Query: {    hello: () => 'Hello world!',  },}const server = new ApolloServer({ typeDefs, resolvers })export default server

3. add in your nuxt.config.js

import server from './server'export default {// ... your nuxt config stuff// ...  hooks: {    render: {      async before({        nuxt: {          server: { app },        },      }) {        await server.applyMiddleware({ app, path: '/api' })        console.log(`🚀 ApolloServer ready at /api`)      },    },  }}

I found a hacky way to achieve it, import the code as a nuxt module:

import http from 'http'export default function () {  this.nuxt.hook('render:before', async () => {    const server = require("./apollo")()        // apply Apollo to Express    server.applyMiddleware({ app: this.nuxt.renderer.app });    console.log(`🚀 ApolloServer ready at ${server.graphqlPath}`);        const httpServer = http.createServer(this.nuxt.renderer.app);        // apply SubscriptionHandlers to httpServer    server.installSubscriptionHandlers(httpServer);    console.log(`🚀 ApolloSubscriptions ready at ${server.subscriptionsPath}`);    // overwrite nuxt.server.listen()    this.nuxt.server.listen = (port, host) => new Promise(resolve => httpServer.listen(port || 3000, host || 'localhost', resolve))        // close this httpServer on 'close' event    this.nuxt.hook('close', () => new Promise(httpServer.close))  })}

Tho I'm now using a probably more stable way, using nuxt programmatically!With hapi instead of express, since express is giving me trouble compiling and not showing the loading-screen(progress of building).Just use npx create-nuxt-app and create an app with a hapi server backend.

The code with hapi would look like this:

const consola = require('consola')const Hapi = require('@hapi/hapi')const HapiNuxt = require('@nuxtjs/hapi')async function start () {  const server = require('./apollo/index')()  const app = new Hapi.Server({    host: process.env.HOST || '127.0.0.1',    port: process.env.PORT || 3000  })  await app.register({    plugin: HapiNuxt  })    app.route(await require('./routes')())    await server.applyMiddleware({    app,    path: '/graphql'  });  console.log(`🚀 ApolloServer ready at ${server.graphqlPath}`);  await server.installSubscriptionHandlers(app.listener)  console.log(`🚀 ApolloSubscriptions ready at ${server.subscriptionsPath}`);  await app.start()  consola.ready({    message: `Server running at: ${app.info.uri}`,    badge: true  })}process.on('unhandledRejection', error => consola.error(error))start().catch(error => console.log(error))

Maybe i can help somebody

An easier way is to use the getMiddleware() method of Apollo Server Express:

Create a file under ./api/index.js:

const { ApolloServer, gql } = require('apollo-server-express')const express = require('express')const typeDefs = gql`  type Query {    hello: String  }`const resolvers = {  Query: {    hello: () => 'Hello world!',  },}const server = new ApolloServer({ typeDefs, resolvers })const app = express()app.use(express.json())app.use(express.urlencoded({ extended: true }))app.use(server.getMiddleware())module.exports = app

and then register it in ./nuxt.config.js:

{  // other nuxt config ...  serverMiddleware: [{ path: '/api', handler: '~/api/index.js' }],}