标签: graphql-subscriptions

我有一个查询,它给我一个笔记列表和一个订阅,它通过改变查询来监听和插入新笔记.但问题是第一个注释没有添加.

所以让我添加更多细节,最初是一个包含一个名为notes的属性的对象的查询响应,如果我们尝试添加一个注释,该属性将被删除.注释是创建的,所以如果我刷新我的应用程序,查询将返回注释然后如果我尝试再次添加注释,注释将添加到查询对象中的数组.

这是我的笔记容器,我查询笔记并创建一个新属性来订阅更多笔记.

export const NotesDataContainer = component => graphql(NotesQuery,{

name: 'notes',
props: props => {

  console.log(props); // props.notes.notes is undefined on first note added when none exists.

  return {
    ...props,
    subscribeToNewNotes: () => {

      return props.notes.subscribeToMore({
        document: NotesAddedSubscription,
        updateQuery: (prevRes, { subscriptionData }) => {

          if (!subscriptionData.data.noteAdded) return prevRes;

          return update(prevRes, {
            notes: { $unshift: [subscriptionData.data.noteAdded] }
          });

        },
      })
    }
  }
}

})(component);

任何帮助都会很棒,谢谢.

编辑:

export const NotesQuery = gql`
  query NotesQuery {
    notes {
      _id
      title
      desc …

我似乎无法理解我在客户端应用程序上遇到的错误.我正在订阅graphql订阅,我能够检索更新,但我无法将更改推送到名为"models:ModelClass []"的视频脚本数组,该数组绑定到视图.

有什么我遗失或做错了吗？

models.component.ts

this.apollo.subscribe({
  query: gql`
    subscription {
      newModelCreated{
        _id
        name
        type
        train_status
        deploy_status
        data_path
        description
        created_at
        updated_at
      }
    }
  `
}).subscribe((data) => {
  console.log("CREATED: " + JSON.stringify(data.newModelCreated));
  console.log(data.newModelCreated);
  var temp:ModelClass = data.newModelCreated;
  this.models.push(temp);
});

模型class.ts

export interface ModelClass {
    _id: string;
    name: string;
    type: string;
    parameters: {
        alpha: number;
    };
    train_status: string;
    deploy_status: string;
    test_accuracy: string;
    created_at: number;
    updated_at: number;
}

我们使用GraphQL订阅和pubsub订阅帖子.

当超过10个订阅发生时,我们得到节点警告"MaxListenersExceededWarning:检测到可能的EventEmitter内存泄漏".

是否可以在pubsub类中引发最大侦听器？

pubsub类位于一个单独的模块中,如下所示:

import { PubSub } from 'graphql-subscriptions';

const pubsub = new PubSub();

export { pubsub };

订阅服务器如下所示:

import { SubscriptionManager } from 'graphql-subscriptions';
import { createServer } from 'http';
import { SubscriptionServer } from 'subscriptions-transport-ws';

import { pubsub } from './subscriptions';
import executableSchema from './executableSchema';

const WS_PORT = 8080;

const websocketServer = createServer((request, response) => {
  response.writeHead(404);
  response.end();
});

websocketServer.listen(WS_PORT, () => console.log(
  `Websocket Server is now running on http://localhost:${WS_PORT}`
));

const subscriptionManager = new SubscriptionManager({
  schema: …

我正在尝试建立订阅并使用ApolloServer（v 2.2.2）。我的安装程序突然突然停止工作。当我尝试连接到graphiql/中的订阅时，Playground出现错误：

{
  "error": "Could not connect to websocket endpoint ws://localhost:4000/graphql. Please check if the endpoint url is correct."
}

由于我的应用程序中有休息端点，因此我需要表达自己的观点，但是我无法从下面的运行中获得最少的示例：

import http from 'http';
import { ApolloServer, PubSub } from 'apollo-server-express';
import express from 'express';

const pubsub = new PubSub();

// The DB
const messages = [];

const typeDefs = `
type Query {
  messages: [String!]!
}
type Mutation {
  addMessage(message: String!): [String!]!
}
type Subscription {
  newMessage: String!
}

schema {
  query: Query
  mutation: …

在过去的一年里,我将应用程序转换为使用Graphql.到目前为止它一直很棒,在转换过程中,我基本上移植了支持我的REST端点的所有服务,以支持grapqhl查询和突变.该应用程序运行良好,但我想继续发展我的对象图.

让我们考虑一下我有以下关系.

用户 - >团队 - >板 - >列表 - >卡 - >评论

我目前有两种不同的嵌套模式:用户 - >团队:

    type User {
  id: ID!
  email: String!
  role: String!
  name: String!
  resetPasswordToken: String
  team: Team!
  lastActiveAt: Date
}

type Team {
  id: ID!
  inviteToken: String!
  owner: String!
  name: String!
  archived: Boolean!
  members: [String]
}

然后我有Boards - > Lists - > Cards - > Comments

type Board {
  id: ID!
  name: String!
  teamId: String!
  lists: [List]
  createdAt: Date
  updatedAt: Date
}

type List {
  id: …

我有一个 GraphQL 驱动的应用程序。查询和变异部分运行良好。我尝试添加 GraphQL 订阅。

服务器 GraphQL 订阅部分代码的灵感来自apollographql/subscriptions-transport-ws的自述文件中的演示。

另请检查代码中的注释以获取更多详细信息。

import Koa from 'koa';
import Router from 'koa-router';
import graphqlHTTP from 'koa-graphql';
import asyncify from 'callback-to-async-iterator';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import firebase from 'firebase-admin';
import { execute, subscribe } from 'graphql';
import { GraphQLObjectType, GraphQLString } from 'graphql';

const MeType = new GraphQLObjectType({
  name: 'Me',
  fields: () => ({
    name: { type: GraphQLString },
    // ...
  }),
});

const listenMe = async (callback) => {
  // Below …

当前，无论何时传入新数据，我都使用Socket.io / SignalR从后端消息队列系统发出事件。这样，我可以在React应用程序中设置事件处理程序，并从事件处理程序中更新中继缓存。

这似乎不是最常用的Graphql方法，所以我在RFC之前的实时查询实现中进行了一些尝试，在该实施例中，您观察到反应式数据存储中的数据更改将其推向Graphql服务器，再到客户端使用websockets ...带有一些相当复杂的自定义代码...显然，graphql还没有准备好进行实时查询（不是轮询）

再往后几行说：

建立基于事件的订阅时，确定事件触发条件的问题很容易，因为该事件明确定义了事件。事实证明，在现有消息队列系统之上实施也是很简单的。

这使我想到了我的问题。当新事件传入后端消息队列应用程序并且您需要实时在ui中反映此新数据时（以秒为单位），您如何（以graphql方式）最佳触发graphql订阅？我不是在谈论在前端/客户端中触发事件，也不是像在谈论订阅时通常看到的那样x秒钟轮询一次。

不确定是否相关，但是我将Relay Modern用作我的首选graphql客户端。

如果我得到一点帮助来大致了解如何触发/调用订阅而不会发生突变，那么以下一些想法可能会起作用。

1. 后端工作程序/消息队列“ A”接收带有某些设备数据的新传入事件。它使用SignalR或其他pubsub（redis / socket.io /？）通知graphql服务器“ B”（预订该事件）发生了新事件。然后，graphql服务器触发/执行订阅，并且前端反应中继应用程序“ C”会自动更新，因为它已定义了中继订阅。这将是理想的，对吗？但是如何在graphql服务器上触发订阅？

2. 只需使用Socket.io/SignalR从传入数据上的后端工作程序/消息队列“ A”发出事件，订阅并处理前端“ B”中的事件，然后从Socket.io/SignalR事件内部以编程方式调用订阅处理程序（如果这样的话，甚至可以直接调用订阅吗？）。但是，使用订阅而不是使用纯Socket.io/SignalR进行的唯一改进是，我将中继缓存/存储的更新从处理程序移到了订阅。如果有的话，没有太大的改进。但是手动更新缓存/存储确实很麻烦，尽管不是那么困难：/

人们如何使用Signalr处理实时流式传输（设备）实时数据，为什么所有的实时文章/示例都只是重复相同的旧的简单聊天应用程序，而ui只是在用户单击事件后进行更新？graphql是否还不适合实时处理频繁进入的设备数据流？我了解为什么实时查询在自己实施后会被延迟，但是如果没有实时查询，实时查询会将实时查询更新从服务器推送到前端吗？

我正在使用与Express搭配得很好的护照本地策略：

passport.use(localStrategy);
passport.serializeUser((user, done) => done(null, JSON.stringify(user)));
passport.deserializeUser((obj, done) => done(null, JSON.parse(obj)));
app.use(passport.initialize());
app.use(passport.session());

这个localStrategy正在做一个Mongoose调用，以根据他的pubKey获取用户，我想request.user是用这种方式填充的。

我这样设置我的graphql端点：

app.use('/graphql', bodyParser.json(), graphqlExpress(request => ({
  debug: true,
  schema,
  context: {
    user: request.user,
    req: request,
  },
  formatError: (e) => {
    console.log(JSON.stringify(e, null, 2));
    return e;
  },
})));

我的订阅是这样的：

const ws = createServer(app);

// Run the server
ws.listen(settings.APP_PORT, () => {
  console.log(`App listening on port ${settings.APP_PORT}!`);
  // Set up the WebSocket for handling GraphQL subscriptions
  new SubscriptionServer({
    execute,
    subscribe,
    schema,
    onConnect: (connectionParams, webSocket) => {
      console.log(webSocket.upgradeReq); …

我有一个订阅，比方说postIsRead，它表示当前正在阅读的帖子列表中的帖子，例如：

帖子：{id：1，阅读：true}

...管他呢。一次只能阅读一篇文章。无论如何，这是通过subscribeToMore在订阅上的updateQuery。

       updateQuery: (prev, { subscriptionData }) => {
            if (!subscriptionData.data) return prev;
            let posts = [...prev.posts];
            posts.forEach((f)=> {
                f.id === subscriptionData.data.postIsRead.id
                    ? f.read = subscriptionData.data.getPosts.read
                    : f.read = false
            });
            return Object.assign({}, prev, {
                getPosts: posts
            });
        }

现在有两个问题：帖子的状态不会立即传播，例如在渲染帖子时，在多个帖子上读取=== true。它似乎滞后了，好像是在延迟加载之类的。我不确定这是React问题还是Apollo问题。

在对此进行故障排除时，它甚至变得更奇怪。我注释掉了updateQuery函数中的所有代码，使得：

       updateQuery: (prev, { subscriptionData }) => {}

...将订阅值更新为：true。我似乎误解了它是如何工作的，因为即使函数未返回任何内容，它也在传播更改。但是，如果我完全删除updateQuery，则不会发生更改。

具体来说（为了赏金），我试图了解在订阅更新时提出更改的最佳方法。

我正在对 Apollo GraphQL 订阅使用 react，我可以在 Apollo Playground 上接收更新，但不能在客户端上接收更新。这是阿波罗游乐场的回应：

Graphql 服务器已开启http://localhost:4000/并在 ws://localhost:4000/graphql 上订阅。但是，它适用于操场，但不适用于客户端。我以这种方式设置 Apollo 客户端以接收来自服务器的更新：

import ApolloClient from 'apollo-boost';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

export const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: {
    reconnect: false
  }
});

export const link = split(
  // split based on operation type
  ({ query }) …