如何在Vanilla JS中使用Apollo Client创建GraphQL订阅 [英] How do I create a GraphQL subscription with Apollo Client in Vanilla JS
问题描述
最近,Apollo Client发布了一个websocket订阅功能,但到目前为止,我仅在componentWillMount生命周期钩子内通过使用subscriptionToMore启动查询来看到它.
Recently Apollo Client released a websocket subscription feature, but so far I've only seen it used by launching a query using subscribeToMore inside the componentWillMount lifecycle hook.
这里是一个来自 https://的示例dev-blog.apollodata.com/tutorial-graphql-subscriptions-client-side-40e185e4be76#0a8f
const messagesSubscription = gql`
subscription messageAdded($channelId: ID!) {
messageAdded(channelId: $channelId) {
id
text
}
}
`
componentWillMount() {
this.props.data.subscribeToMore({
document: messagesSubscription,
variables: {
channelId: this.props.match.params.channelId,
},
updateQuery: (prev, {subscriptionData}) => {
if (!subscriptionData.data) {
return prev;
}
const newMessage = subscriptionData.data.messageAdded;
// don't double add the message
if (!prev.channel.messages.find((msg) => msg.id === newMessage.id)) {
return Object.assign({}, prev, {
channel: Object.assign({}, prev.channel, {
messages: [...prev.channel.messages, newMessage],
})
});
} else {
return prev;
}
}
});
}
但是 subscribeToMore 特定于Apollo Client React集成.在 VanillaJS 中,有一个watchQuery,但它是说明不应将其用于订阅.还有一个 subscribe 可能就是我要搜索的内容,但没有记录.
But subscribeToMore is specific to Apollo Client React integration. In VanillaJS there is a watchQuery, but it's stated it should not be used for subscriptions. There is also a subscribe that might be what I'm searching for, but is not documented.
有什么方法可以使用Apollo GraphQL客户端来处理订阅,而无需在React组件内部?
Is there any way using Apollo GraphQL client to handle subscriptions, without being inside a React Component?
推荐答案
原来是订阅方法.我在这里找到了说明: https://dev-blog .apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#eeba
Turns out it is the subscribe method. I found a description here: https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#eeba
ApolloClient.subscribe接受一个查询和变量,并返回一个可观察值.然后,我们在可观察对象上调用订阅,并为其提供下一个函数,该函数将调用updateQuery. updateQuery指定在给定订阅结果后我们希望如何更新查询结果.
ApolloClient.subscribe takes a query and variables, and returns an observable. We then call subscribe on the observable, and give it a next function which will call updateQuery. updateQuery specifies how we want our query result to be updated when given the subscription result.
subscribe(repoName, updateQuery){
// call the "subscribe" method on Apollo Client
this.subscriptionObserver = this.props.client.subscribe({
query: SUBSCRIPTION_QUERY,
variables: { repoFullName: repoName },
}).subscribe({
next(data) {
// ... call updateQuery to integrate the new comment
// into the existing list of comments
},
error(err) { console.error('err', err); },
});
}
这篇关于如何在Vanilla JS中使用Apollo Client创建GraphQL订阅的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!