GraphQL订阅- subscriptionsClient.subscribe不是一个函数

Question

因此，我正在尝试创建一个基本的GraphQL订阅服务器。请求中的问题导致石墨化。它是- "subscriptionsClient.subscribe不是一个函数“。我不明白哪里有问题。

对于GraphQL订阅服务器，我使用了：图形ws服务器-快件，订阅-传输-ws，图形ws订阅

所以，这是你的任务，GraphQL大师。

代码：

index.js

const { createServer } = require('http')
const app = require('express')();
const bodyParser = require('body-parser')
const { graphqlExpress, graphiqlExpress } = require('graphql-server-express')
const { SubscriptionServer } = require('subscriptions-transport-ws')
const { subscribe, execute } = require('graphql');
const schema = require('./schema');

app.use(bodyParser.json());
app.use('/graphql', new graphqlExpress({
  schema
}));
app.use('/graphiql', new graphiqlExpress({
  endpointURL: '/graphql',
  subscriptionsEndpoint: 'ws://localhost:4000/subscriptions'
}));

const server = createServer(app);

server.listen(4000, () => {
  console.log("Server is listening on port 4000!");

  subscriptionServer = SubscriptionServer.create(
    {
      schema,
      execute,
      subscribe,
      onConnect: () => console.log("Client connected!")
    }, {
      server,
      path: '/subscriptions'
    }
  );
});

schema.js

const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLNonNull,
  GraphQLList,
  GraphQLID,
  GraphQLString
} = require('graphql');
const { PubSub, withFilter } = require('graphql-subscriptions');
const socket = new PubSub();
const store = [];
const NameType = new GraphQLObjectType({
  name: "Name",
  fields: {
    id: { type: GraphQLID },
    name: { type: GraphQLString }
  }
});
const RootQuery = new GraphQLObjectType({
  name: "RootQuery",
  fields: {
    names: {
      type: new GraphQLList(NameType),
      resolve: () => store
    }
  }
});
const RootMutation = new GraphQLObjectType({
  name: "RootMutation",
  fields: {
    addName: {
      type: NameType,
      args: {
        name: { type: new GraphQLNonNull(GraphQLString) }
      },
      resolve(_, { name }) {
        let model = {
          id: store.length,
          name
        }
        socket.publish("names", model);
        store.push(model);
        return model;
      }
    }
  }
});
const RootSubscription = new GraphQLObjectType({
  name: "RootSubscription",
  fields: {
    names: {
      type: NameType,
      resolve() {
        console.log("IS RUNNING");
      },
      subscribe: withFilter(() => pubsub.asyncIterator("names"), (payload, variables) => {
        return payload.names.id === variables.relevantId;
      })
    }
  }
});
module.exports = new GraphQLSchema({
  query: RootQuery,
  mutation: RootMutation,
  subscription: RootSubscription
});

Answer 1

好的，事情是这样的。

我已经使用阿波罗服务器创建了一个完全响应的GraphQL订阅服务器。只需使用apollo-server-express和阿波罗服务器包来完成此任务。ApolloServer提供了支持订阅的GraphQL游乐场。因此，在前端调试和使用它很容易。

祝好运!

Answer 2

这是最新的一张。这是基于ApolloGraphql文档的。这对我来说是完美的。

app.js

import mongoose from 'mongoose'
import cors from 'cors';
import dotEnv from 'dotenv'
import http from 'http';
import { ApolloServer, PubSub } from 'apollo-server-express';
import schema from './graphql/schema'
import express from 'express';

dotEnv.config();
const port = process.env.PORT || 3000;
const pubsub = new PubSub();
const app = express();

const server = new ApolloServer({
    schema,
    subscriptions: {
        onConnect: () => console.log('️ Client connected  to websocket'),
        onDisconnect: (webSocket, context) => {
            console.log('Client disconnected from websocket')
        },
    },

});

server.applyMiddleware({ app })

const httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);

httpServer.listen(port, () => {
    console.log(` Apollo Server Server ready at http://localhost:${port}${server.graphqlPath}`)
})

package.json

  "dependencies": {
    "apollo-server": "^2.25.1",
    "apollo-server-express": "^2.25.1",
    "babel-node": "^0.0.1-security",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "cross-fetch": "^3.1.4",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "graphql": "^15.5.0",
    "graphql-subscriptions": "^1.2.1",
    "graphql-tools": "^7.0.5",
    "moment": "^2.29.1",
    "mongoose": "^5.12.13",
    "subscriptions-transport-ws": "^0.9.19"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/node": "^7.14.2",
    "@babel/preset-env": "^7.14.4",
    "@babel/register": "^7.13.16",
    "jest": "^27.0.4",
    "nodemon": "^2.0.7",
    "supertest": "^6.1.3"
  }

Answer 3

import { w3cwebsocket } from 'websocket';
...
const myWSClient =  createClient({
  url: websockerUrl || "",
  webSocketImpl: w3cwebsocket,
});
const wsLink = new GraphQLWsLink(myWSClient);