Apollo GraphQL 订阅
Apollo GraphQL Subscriptions
我在使用 Apollo 中的 GraphQL 订阅时遇到问题。我想订阅添加的 "perspectives" 主题(基本上是对帖子添加的评论),而且我很确定我的服务器设置正确。客户给我带来了麻烦。 (如果这个问题看起来很眼熟,我之前问过它并认为我得到了答案,但没有去)。这是我的订阅架构:
type Subscription {
perspectiveAdded: Perspective
}
schema {
query: RootQuery
mutation: Mutation
subscription: Subscription
}
我的订阅解析器:
Subscription: {
perspectiveAdded(perspective) {
return perspective;
}
}
我的订阅管理器:
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
schema,
pubsub,
setupFunctions: {
perspectiveAdded: (options, args) => {
perspectiveAdded: {
filter: (topic) => {
return topic
}
}
},
}
});
export { subscriptionManager, pubsub };
我的 addPerspective 突变的最后一部分是(订阅的事件触发器):
//...
return perspective.save((error, perspective) => {
if(error){
console.log(error);
}
//Publish it to Subscription channel
pubsub.publish('perspectiveAdded', perspective);
});
然后我连接了实际的服务器以支持订阅:
const PORT = process.env.PORT || 4000;
const server = createServer(app);
server.listen(PORT, ()=>{
new SubscriptionServer(
{
subscriptionManager: subscriptionManager,
onConnect: (connectionParams, webSocket) => {
console.log('Websocket connection established Lord Commander');
},
onSubscribe: (message, params, webSocket) => {
console.log("The client has been subscribed, Lord Commander", message, params);
},
onUnsubsribe: (webSocket) => {
console.log("Now unsubscribed, Lord Commander");
},
onDisconnect: (webSocket) => {
console.log('Now disconnected, Lord Commander');
}
},
{
server: server,
path: '/subscriptions',
});
console.log('Server is hot my Lord Commander!');
});
我也已正确连接客户端,因为在我的终端中我看到 "Websocket connection established" 消息。我难过的部分是如何实际调用订阅。根据 Apollo 博客,我应该能够在 GraphiQL 中测试订阅(因为我使用的是 apollo 服务器,现在是 graphql-server-express),但它说 "Resolve function for \"Subscription.perspectiveAdded\" 返回未定义”。
对于我的组件,我尝试连接 'subscribeToMore' 但在浏览器控制台中,我收到一个错误对象 "Invalid params returned from onSubscribe! return values must be an object!" 我不确定它是哪个对象指的是。
这是我的名为 perspectiveSubscription 的订阅查询:
export default gql`
subscription {
perspectiveAdded {
id
content
}
}
`;
以及连接的组件:
constructor(props){
super(props);
this.state = {};
this.subscription = null;
}
componentWillReceiveProps(nextProps) {
if (!this.subscription && !nextProps.data.loading) {
let { subscribeToMore } = this.props.data
this.subscription = subscribeToMore(
{
document: perspectiveSubscription,
updateQuery: (previousResult, { subscriptionData }) => {
if(!subscriptionData.data){
console.log('no new subscription data');
return previousResult;
}
const newPerspective = subscriptionData.data.perspectiveAdded;
console.log(newPerspective);
return Object.assign({}, previousResult, newPerspective);
}
}
)
}
从这里开始,我在终端中收到一条消息,说明客户端已订阅,但我仍然收到上述错误对象。几天来我一直在为此烦恼——你们看到我在这里遗漏了什么吗?具体来说,客户端有什么想法吗?谢谢大家!
服务器端似乎不正确,因为添加了订阅并且 graphiql 也没有提供正确的结果。
我建议您检查频道定义:
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
schema,
pubsub,
setupFunctions: {
perspectiveAdded: (options, args) => {
perspectiveAdded: {
filter: (perspective) => {
console.log(perspective); // check if object is correct
return true; // return true and not the object as long as you do not want to filter
}
}
},
}
});
export { subscriptionManager, pubsub };
并且还要检查在 pubsub 调用之前是否保存和定义了透视对象。
而且我认为您还想添加订阅应该适用的评论 ID。在我这边,它看起来或多或少像这个
我在使用 Apollo 中的 GraphQL 订阅时遇到问题。我想订阅添加的 "perspectives" 主题(基本上是对帖子添加的评论),而且我很确定我的服务器设置正确。客户给我带来了麻烦。 (如果这个问题看起来很眼熟,我之前问过它并认为我得到了答案,但没有去)。这是我的订阅架构:
type Subscription {
perspectiveAdded: Perspective
}
schema {
query: RootQuery
mutation: Mutation
subscription: Subscription
}
我的订阅解析器:
Subscription: {
perspectiveAdded(perspective) {
return perspective;
}
}
我的订阅管理器:
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
schema,
pubsub,
setupFunctions: {
perspectiveAdded: (options, args) => {
perspectiveAdded: {
filter: (topic) => {
return topic
}
}
},
}
});
export { subscriptionManager, pubsub };
我的 addPerspective 突变的最后一部分是(订阅的事件触发器):
//...
return perspective.save((error, perspective) => {
if(error){
console.log(error);
}
//Publish it to Subscription channel
pubsub.publish('perspectiveAdded', perspective);
});
然后我连接了实际的服务器以支持订阅:
const PORT = process.env.PORT || 4000;
const server = createServer(app);
server.listen(PORT, ()=>{
new SubscriptionServer(
{
subscriptionManager: subscriptionManager,
onConnect: (connectionParams, webSocket) => {
console.log('Websocket connection established Lord Commander');
},
onSubscribe: (message, params, webSocket) => {
console.log("The client has been subscribed, Lord Commander", message, params);
},
onUnsubsribe: (webSocket) => {
console.log("Now unsubscribed, Lord Commander");
},
onDisconnect: (webSocket) => {
console.log('Now disconnected, Lord Commander');
}
},
{
server: server,
path: '/subscriptions',
});
console.log('Server is hot my Lord Commander!');
});
我也已正确连接客户端,因为在我的终端中我看到 "Websocket connection established" 消息。我难过的部分是如何实际调用订阅。根据 Apollo 博客,我应该能够在 GraphiQL 中测试订阅(因为我使用的是 apollo 服务器,现在是 graphql-server-express),但它说 "Resolve function for \"Subscription.perspectiveAdded\" 返回未定义”。
对于我的组件,我尝试连接 'subscribeToMore' 但在浏览器控制台中,我收到一个错误对象 "Invalid params returned from onSubscribe! return values must be an object!" 我不确定它是哪个对象指的是。
这是我的名为 perspectiveSubscription 的订阅查询:
export default gql`
subscription {
perspectiveAdded {
id
content
}
}
`;
以及连接的组件:
constructor(props){
super(props);
this.state = {};
this.subscription = null;
}
componentWillReceiveProps(nextProps) {
if (!this.subscription && !nextProps.data.loading) {
let { subscribeToMore } = this.props.data
this.subscription = subscribeToMore(
{
document: perspectiveSubscription,
updateQuery: (previousResult, { subscriptionData }) => {
if(!subscriptionData.data){
console.log('no new subscription data');
return previousResult;
}
const newPerspective = subscriptionData.data.perspectiveAdded;
console.log(newPerspective);
return Object.assign({}, previousResult, newPerspective);
}
}
)
}
从这里开始,我在终端中收到一条消息,说明客户端已订阅,但我仍然收到上述错误对象。几天来我一直在为此烦恼——你们看到我在这里遗漏了什么吗?具体来说,客户端有什么想法吗?谢谢大家!
服务器端似乎不正确,因为添加了订阅并且 graphiql 也没有提供正确的结果。
我建议您检查频道定义:
const pubsub = new PubSub();
const subscriptionManager = new SubscriptionManager({
schema,
pubsub,
setupFunctions: {
perspectiveAdded: (options, args) => {
perspectiveAdded: {
filter: (perspective) => {
console.log(perspective); // check if object is correct
return true; // return true and not the object as long as you do not want to filter
}
}
},
}
});
export { subscriptionManager, pubsub };
并且还要检查在 pubsub 调用之前是否保存和定义了透视对象。
而且我认为您还想添加订阅应该适用的评论 ID。在我这边,它看起来或多或少像这个