唠叨几句
这几天一直在看 Graphql结合Apollo的官网和资料,加上最近遇到的一些问题所以整理一下最近写的GraphqlApollo订阅模式
1.配置Apollo文件需要的依赖
import { getMainDefinition } from 'apollo-utilities'
import { split } from 'apollo-link'
import { createHttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws';
1.5首先需要使用WebSocketLink来进行订阅链接
const makeApolloClient = (token = `autoforyou`) => {
const httpLink = createHttpLink({
uri: `网址`,
headers: {
},
})
const wsLink = new WebSocketLink({
uri: `ws网址`,
options: {
reconnect: true,
connectionParams: {
headers: {
"这里写token",
}
}
}
});
正在实例化一个WebSocketLink知道订阅端点的。在这种情况下,订阅点类似于HTTP终结点,不同之处在于它使用ws而不是http协议。使用token从中检索到的用户身份验证websocket连接localStorage
const client = new ApolloClient({
link,
cache,
});
实例化APolloClient
2. 订阅模式
在想要进行订阅的地方放入subscribeToMore
<Query query={FEED_QUERY}>
{({ loading, error, data, subscribeToMore }) => {
}}
</Query>
订阅模式的查询语句
const NEW_LINKS_SUBSCRIPTION = gql`
subscription MySubscription {
customer {
customer_name
updated_at
customer_source
customer_tel
id
customer_phone
industry {
name
}
level {
level_name
id
}
}
}
通过调用其各自的函数,可以确保该组件确实订阅了事件
<Query query={FEED_QUERY}>
{({ loading, error, data, subscribeToMore }) => {
this._subscribeToNewLinks(subscribeToMore)
}}
</Query>
将两个参数传递给subscribeToMore
_subscribeToNewLinks =subscribeToMore => {
subscribeToMore({
document: NEW_LINKS_SUBSCRIPTION,//下面有解释
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const newFeedItem = subscriptionData.data.customer;
console.log(newFeedItem)
return Object.assign({}, prev, {
customer: newFeedItem, ...prev.customer, //这里其实我不懂为啥我放在[]里就是一直重复的增加空白demo
count: prev.customer.length + 1,
__typename: prev.customer.__typename
})
}
})
}
document:这代表订阅查询本身。就您而言,每次创建新链接时,订阅都会触发。 updateQuery :updateQuery:类似于缓存update道具,此功能可让您确定如何使用事件发生后服务器发送的信息更新,在内部所做的全部工作updateQuery是从收到的链接中检索新链接subscriptionData,将其合并到现有链接列表中,并返回此操作的结果。
3. 后记
这里是我自己的总结从头到尾订阅的过程,如果发现错误,欢迎留言指出~
参考
1. Apollo官网: https://www.apollographql.com/docs/react/data/subscriptions/
2. 如何Graphql: https://www.howtographql.com/react-apollo/0-introduction/