【问题标题】:Apollo server + React Apollo pubSub not showing dataApollo 服务器 + React Apollo pubSub 不显示数据
【发布时间】:2017-03-10 18:10:13
【问题描述】:

突变后,我的反应前端似乎无法接收 pubSub 数据

我有以下 Graphql 架构:

type SSiD {
    id: ID!
    name: String
    status: String
    hidden: Boolean
 }
type Subscription {
  SSiDAdded: SSiD
}

在混乱之后,我在我的 apolloServer 上发送这样的 pubSub 数据

const data = result.dataValues
data.__typename = 'SSiD'
console.log(data)
context.pubsub.publish('SSiDAdded', data)

console.log 会输出:

{ id: 2208,
  name: 'FooBar',
  hidden: true,
  status: 'broadcasting',
  updatedAt: 2016-10-27T22:07:09.119Z,
  createdAt: 2016-10-27T22:07:09.119Z,
  __typename: 'SSiD' }

最后在我的反应前端我有以下内容:

const query = gql`
  subscription ssidList{
    SSiDAdded{
      id
      name
      hidden
    }
  }
`
this.subscriptionObserver = this.props.client.subscribe({
  query
})
.subscribe({
  next (data) {
    console.log('The subscription data', data)
  },
  error (err) {
    console.error('Error subscription', err)
  }
})

}

console.log 上面的订阅数据始终为空。

我是否将响应包装错了或类似的东西?

【问题讨论】:

    标签: javascript graphql apollo-server react-apollo


    【解决方案1】:

    这里有几件事要检查。在我的模式中,它有一些我目前在你的模式中没有看到的语法。看到查询字符串后面的: instant_message了吗?

    const typeDefinitions = [`
    
    type instant_message {
      id: Int
      fromID: String
      toID: String
      msgText: String
    }
    type Query {
      instant_message(id: Int, fromID: String, toID: String, msgText: String): [instant_message]
    }
    type Mutation {
      createIM(
        fromID: String!
        toID: String!
        msgText: String!
      ): instant_message
    }
    type Subscription {
      # Subscription fires on every comment added
      IMAdded(id: Int, fromID: String!, toID: String!): instant_message
    }
    
    schema {
      query: Query,
      mutation: Mutation
      subscription: Subscription
    }
    
    `];
    

    我在客户端也有一些不同的语法:

    subscribe(fromID, toID, updateQueryViaSubscription) {
        const SUBSCRIPTION_QUERY = gql`
          subscription getIMsViaSubscription($fromID: String!, $toID: String!){
              IMAdded(fromID:$fromID, toID: $toID){
                id,
                fromID,
                toID,
                msgText
              }
            } 
    `;
        this.subscriptionObserver = this.props.client.subscribe({
            query: SUBSCRIPTION_QUERY,
            variables: { fromID: this.fromID, toID: this.toID },
        }).subscribe({
            next(data) {
                const newMsag = data.IMAdded;
                updateQueryViaSubscription((previousResult) => {
                    // if it's our own mutation, we might get the subscription result
                    // after the mutation result.
                    // if (isDuplicateIM(newComment, previousResult.entry.comments)) {
                    //     return previousResult;
                    // }
                    // update returns a new "immutable" list with the new comment
                    // added to the front.
                    return update(
                        previousResult,
                        {
                            instant_message: {
                                $push: [newMsag],
                            },
                        }
                    );
                });
            },
            error(err) {
                console.error('err', err); },
        });
    }
    

    请检查一下,如果更新的代码消除了该错误,请告诉我。

    更新:根据我们在 Slack 上的讨论,您发现您需要您的可执行架构是这样的:

    const executableSchema = makeExecutableSchema({
        typeDefs: typeDefinitions,
        resolvers: Resolvers,
        connectors: Connectors,
        logger: console,
    });
    
    export default executableSchema;
    

    这是我正在使用的解析器:

    Subscription: {
        IMAdded(IMThatWasAdded) {
            var ret = IMThatWasAdded;
            return ret;
        }
    }
    

    【讨论】:

    • 在后端我使用“:”它是:SSiD 只是我没有接受任何参数,所以它只是成为名称:ReturnType,在前端我认为有点相似“ queryName{subscriptionName{fields}}"
    猜你喜欢
    • 2017-01-11
    • 2018-09-19
    • 2019-10-05
    • 2017-02-23
    • 2018-03-05
    • 2021-07-27
    • 2020-09-14
    • 2021-05-09
    • 2019-12-29
    相关资源
    最近更新 更多