使用subscriptions-transport-ws设置Apollo Server？

Question

似乎我根据http://dev.apollodata.com/tools/apollo-server/setup.html的Apollo文档设置了我的服务器。在我的server / main.js文件中：

//SET UP APOLLO INCLUDING APOLLO PUBSUB
const executableSchema = makeExecutableSchema({
    typeDefs: Schema,
    resolvers: Resolvers,
    connectors: Connectors,
    logger: console,
});

const GRAPHQL_PORT = 8080;
const graphQLServer = express();

// `context` must be an object and can't be undefined when using connectors
graphQLServer.use('/graphql', bodyParser.json(), apolloExpress({
    schema: executableSchema,
    context: {}, //at least(!) an empty object
}));

graphQLServer.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
}));

graphQLServer.listen(GRAPHQL_PORT, () => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql`
));
//SET UP APOLLO INCLUDING APOLLO PUBSUB

打印出来＆＃34; GraphQL Server现在正在http://localhost:8080/graphql＆＃34;到终端日志，指示服务器已成功初始化。

但是在我的main_layout组件的顶部，当我运行这段代码时：

import { Client } from 'subscriptions-transport-ws';
const wsClient = new Client('ws://localhost:8080');

...我收到此控制台消息：

  

WebSocket连接到＆＃39; ws：// localhost：8080 /＆＃39;失败：在收到握手响应之前关闭连接

我错过了什么？

Answer 1

您需要创建一个专用的websocket服务器。它将在不同的端口上运行，并且subscriptions-transport-ws包上提供了设置它的代码。

从GitHunt-API示例中查看以下代码： https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

此外，您会看到此代码依赖于名为SubscriptionManager的类。它是来自apollo团队的名为graphql-subscriptions的包中的类，您可以在此处找到如何使用它的示例： https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js

Answer 2

TL; DR：您可以使用graphql-up快速获取具有订阅支持并准备就绪的GraphQL服务器。与Apollo和websocket客户端detailed tutorial结合使用时，这里有更多subscriptions-transport-ws。

只需单击

即可获取GraphQL服务器

假设您要基于此GraphQL Schema in IDL syntax构建Twitter克隆：

type Tweet {
  id: ID!
  title: String!
  author: User! @relation(name: "Tweets")
}

type User {
  id: ID!
  name: String!
  tweets: [Tweet!]! @relation(name: "Tweets")
}

点击此按钮可以接收您自己的GraphQL API，然后打开Playground，您可以在其中添加一些推文，查询所有推文以及测试订阅。

简单易用的API

首先，让我们创建一个用户，该用户将成为所有即将发布的推文的作者。在Playground中运行此变异：

mutation createUser {
  createUser(name: "Tweety") {
    id # copy this id for future mutations!
  }
}

以下是查询存储在GraphQL服务器上的所有推文及其作者的方法：

query allTweets {
  allTweets {
    id
    title
    createdAt
    author {
      id
      name
    }
  }
}

使用websockets的订阅支持

现在让我们订阅“Tweety”的新推文。这是语法：

subscription createdTweets {
  Message(filter: {
    mutation_in: [CREATED]
    node: {
      author: {
        name: "Tweety"
      }
    }
  }) {
    node {
      id
      text
      createdAt
      sentBy {
        id
        name
      }
    }
  }
}

现在在Playground中创建一个新标签并创建一个新的推文：

mutation createTweet {
  createTweet(
    title: "#GraphQL Subscriptions are awesome!"
    authorId: "<id-from-above>"
  ) {
    id
  }
}

您应该会在之前订阅的其他标签中看到一个新事件。

Answer 3

以下是使用Apollo GraphQL，React＆amp; amp;哈皮：https://github.com/evolastech/todo-react。它不像GitHunt-React＆amp; amp; GitHunt-API

Answer 4

好像你实际上并没有制作websocket服务器。使用SubscriptionServer。请记住，davidyaha说，你必须拥有一个专用的websocket端口（我也想过这个），这绝对不是真的。我有正常的查询和潜艇在同一个端口。

import { createServer } from 'http';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { execute, subscribe } from 'graphql';
import { schema } from './my-schema';

// All your graphQLServer.use() etc setup goes here, MINUS the graphQLServer.listen(),
// you'll do that with websocketServer:

// Create WebSocket listener server
const websocketServer = createServer(graphQLServer);

// Bind it to port and start listening
websocketServer.listen(3000, () => console.log(
  `Server is now running on http://localhost:3000`
));

const subscriptionServer = SubscriptionServer.create(
  {
    schema,
    execute,
    subscribe,
  },
  {
    server: websocketServer,
    path: '/subscriptions',
  },
);