Graphql 使用NEXT.js和Apollo client 2配置订阅

我正在尝试使用Apollo 2和NEXT.js配置订阅。我可以让客户端连接到服务器，并且它们正在GraphQL平台上工作，因此错误的配置必须位于withData文件中，或者处理订阅的组件中

在chrome中检查网络面板上的套接字连接时，订阅负载不会像GraphQL游戏场中那样作为帧添加

使用数据：

从“阿波罗链接”导入{apollo链接，可观测}；
从“../config/env”导入{GRAPHQL_端点，WS_路径}；
从“apollo客户端”导入{apollo客户端}；
从“apollo链接批处理http”导入{BatchHttpLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“订阅传输ws”导入{SubscriptionClient}；
从'apollo link ws'导入{WebSocketLink}；
从“apollo链接持久化查询”导入{createPersistedQueryLink}；
从“阿波罗链接错误”导入{onError}；
从“下一个阿波罗”导入阿波罗；
从“阿波罗链接状态”导入{withClientState}；
函数createClient（{headers}）{
常量缓存=新的InMemoryCache（）；
常量请求=异步（操作）=>{
操作.setContext({
http:{
includeExtensions:正确，
includeQuery:false
},
标题
});
};
const requestLink=新链接(
（操作，向前）=>新的可观察对象（（观察者）=>{
让我来处理；
承诺.解决（操作）
.然后（操作=>请求（操作））
.然后（（）=>{
句柄=转发（操作）。订阅({
下一个：observer.next.bind（observer），
错误：observer.error.bind（observer），
完成：观察者。完成。绑定（观察者）
});
})
.catch（observer.error.bind（observer））；
return（）=>{
if（handle）handle.unsubscribe（）；
};
})
);
返回新客户端({
链接：ApolloLink.from([
onError（{graphQLErrors，networkError}）=>{
如果（图形错误）{
log（{graphQLErrors}）；
}
如果（网络错误）{
console.log（“注销用户”）；
}
}),
请求链接，
//链接，
withClientState({
默认值：{
断开连接：正确
},
解析程序：{
突变：{
updateNetworkStatus:（_，{isConnected}，{cache}）=>{
writeData（{data:{isConnected}}）；
返回null；
}
}
},
隐藏物
}),
createPersistedQueryLink（）.concat(
新的BatchHttpLink({
uri:GRAPHQL_端点，
凭据：“包括”
}),
进程浏览器
？新的WebSocketLink({
uri:WS_路径，
选项：{
重新连接：正确
}
})
：null
)
]),
隐藏物
});
}
使用Apollo（createClient）导出默认值；

订阅组件：

从“../../constants/querys”导入{CONVERSATION_QUERY}；
从“../../constants/subscriptions”导入{CONVERSATION_SUBSCRIPTION}；
从“道具类型”导入道具类型；
从'react apollo'导入{Query}；
const Conversation=props=>(
{（有效载荷）=>{
常量more=（）=>payload.subscribeToMore({
文档：会话订阅，
变量：{input:{conversation:props.\u id}}，
updateQuery：（prev，{subscriptionData}）=>{
log（{subscriptionData}）；
如果（！subscriptionData.data.messageSent）返回prev；
常数数据=下标数据；
console.log（{data}）；
返回Object.assign（{}，prev，{}）；
},
onError（错误）{
console.log（错误）；
},
onSubscriptionData:（数据）=>{
log（'onSubscriptionData'，data）；
}
});
返回props.children（{…有效载荷，更多}）；
}}
);
Conversation.propTypes={
子项：需要PropTypes.func.isRequired
};
导出默认会话；

已在GraphQL游乐场中测试的订阅：

从“graphql标签”导入gql；
导出const CONVERSATION_SUBSCRIPTION=gql`
订阅messageSent（$input:messageSentInput）{
messageSent（输入：$input）{
_身份证
使用者{
_身份证
侧面图{
名字
姓氏
职务
公司
照片
}
}
信息{
_身份证
身体
创建数据
阅读
寄件人{
_身份证
侧面图{
名字
姓氏
职务
公司
照片
}
}
}
}
}
`;

然后在componentDidMount中执行更多功能：

componentDidMount（）{
this.props.subscribeToMore（）；
}

控制台中登录updateQuery的结果是：

{“数据”：{“messageSent”：null}

我没有正确配置withData文件。您需要使用apollo链接包中的split来让apollo确定是否应该使用http或ws来处理请求。这是我的工作配置文件

从“阿波罗链接”导入{apollo链接，可观测}；
从“apollo客户端”导入{apollo客户端}；
从“apollo链接批处理http”导入{BatchHttpLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从'apollo link ws'导入{WebSocketLink}；
从“apollo链接持久化查询”导入{createPersistedQueryLink}；
从“apollo实用程序”导入{getMainDefinition}；
从“阿波罗链接错误”导入{onError}；
从“阿波罗链接”导入{split}；
从“下一个阿波罗”导入阿波罗；
从“阿波罗链接状态”导入{withClientState}；
从“../config/env”导入{GRAPHQL_端点，WS_路径}；
函数createClient（{headers}）{
常量缓存=新的InMemoryCache（）；
常量请求=异步（操作）=>{