express - Apollo Server 作为 Nuxt 服务器中间件

Question

我已经设法在 Nuxtjs 中拥有一个 express + Apollo 后端作为 serverMiddleware。一切正常(身份验证、缓存、数据源、查询、突变)，但现在我正试图让订阅(websockets)运行，这让我很难过。

我试过这个例子 https://www.apollographql.com/docs/apollo-server/data/subscriptions/#subscriptions-with-additional-middleware但即使让 httpServer 监听也没有用。

这是我通过 nuxt.config.js 和 '~/api/index' 需要的 API 文件:

module.exports = async () => {
  const app = require('express')()
  const server = await require("./apollo")() // apollo-server-express w/ typeDefs and resolvers

  // apply Apollo to Express
  server.applyMiddleware({ app });
  console.log(`🚀 ApolloServer ready at ${server.graphqlPath}`);

  const httpServer = http.createServer(app);
  server.installSubscriptionHandlers(httpServer);
  console.log(`🚀 ApolloSubscriptions ready at ${server.subscriptionsPath}`);

  return {
    path: '/api',
    handler: httpServer
  }
}

现在我的 Playground 给我这个错误:“无法连接到 websocket 端点 ws://192.168.150.98:3000/api/graphql。请检查端点 url 是否正确。”

类型定义:

type Subscription {
  postAdded: Post
}
type Post {
  author: String
  comment: String
}
type Query {
  posts: [Post]
}
type Mutation {
  addPost(author: String, comment: String): Post
}

解析器:

Query: {
  posts(root, args, context) {
    return Posts;
  }
}
Mutation: {
  addPost(root, args, context) {
    pubsub.publish(POST_ADDED, { postAdded: args });
    return Posts.add(args);
  }
},
Subscription: {
  postAdded: {
    // Additional event labels can be passed to asyncIterator creation
    subscribe: () => pubsub.asyncIterator([POST_ADDED]),
  },
}

这里的第一个问题，提前谢谢你! :)

Answer 1

也可以轻松一点

1.

yarn add apollo-server-express

或

npm install apollo-server-express

1. 创建文件 ./server/index.js

import { ApolloServer, gql } from 'apollo-server-express'

    // Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
}

const server = new ApolloServer({ typeDefs, resolvers })

export default server

1. 添加你的 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`)
      },
    },
  }
}