[英]`updater` not working correctly when using subscriptions in Relay Modern
I'm using Relay Modern in my app and have successfully integrated subscriptions using the requestSubscription
function. 我在我的应用程序中使用了Relay Modern,并使用
requestSubscription
功能成功集成了订阅。 All works well and the updater
function that I use to update the cache gets called correctly with the proper subscription payload. 一切正常,我用来更新缓存的
updater
功能可以使用正确的订阅有效负载正确调用。
The subscription is used to add a new item to a list of Link
elements. 订阅用于将新项添加到
Link
元素列表中。 Here's what the subscription looks like: 这是订阅的样子:
const newLinkSubscription = graphql`
subscription NewLinkSubscription {
Link {
mutation
node {
id
description
url
createdAt
postedBy {
id
name
}
}
}
}
`
export default (updater, onError) => {
const subscriptionConfig = {
subscription: newLinkSubscription,
variables: {},
updater,
onError
}
requestSubscription(
environment,
subscriptionConfig
)
}
I then have a LinkList
component that's rendering all the Link
elements. 然后我有一个
LinkList
组件,它渲染所有的Link
元素。 In componentDidMount
of that component, I initiate the NewLinkSubscription
: 在
componentDidMount
该组件的,我开始NewLinkSubscription
:
class LinkList extends Component {
componentDidMount() {
NewLinkSubscription(
proxyStore => {
const createLinkField = proxyStore.getRootField('Link')
const newLink = createLinkField.getLinkedRecord('node')
const viewerProxy = proxyStore.get(this.props.viewer.id)
const connection = ConnectionHandler.getConnection(viewerProxy, 'LinkList_allLinks')
if (connection) {
ConnectionHandler.insertEdgeAfter(connection, newLink)
}
},
error => console.log(`An error occured:`, error),
)
}
render() {
console.log(`LinkList - render `, this.props.viewer.allLinks.edges)
return (
<div>
{this.props.viewer.allLinks.edges.map(({node}) =>
{
console.log(`render node: `, node)
return <Link key={node.id} link={node} viewer={this.props.viewer} />
}
)}
</div>
)
}
}
export default createFragmentContainer(LinkList, graphql`
fragment LinkList_viewer on Viewer {
id
...Link_viewer
allLinks(last: 100, orderBy: createdAt_DESC) @connection(key: "LinkList_allLinks", filters: []) {
edges {
node {
...Link_link
}
}
}
}
`)
Now, here's what's happening when a subscription with a new Link
comes in. The updater
is called correctly and it seems like the new node gets inserted into the connection correctly (at least ConnectionHandler.insertEdgeAfter(connection, newLink)
is called). 现在,这是当有新
Link
的订阅进入时发生的情况。正确调用updater
,似乎新节点正确插入连接(至少调用ConnectionHandler.insertEdgeAfter(connection, newLink)
)。
This triggers a rerender of the component. 这会触发组件的重新呈现。 When I debug
render
to inspect the data ( props.viewer.allLinks.edges
), I can see that a new node indeed was added to the connection - so the list actually does contain one more item now! 当我调试
render
以检查数据( props.viewer.allLinks.edges
)时,我可以看到确实在连接中添加了一个新节点 - 所以列表实际上确实包含了另一个项目! However, the problem is that this new node is actually undefined
which causes the app to crash! 但是,问题是这个新节点实际上是
undefined
,导致应用程序崩溃!
Does anyone spot what I'm missing here? 有没有人发现我在这里缺少的东西?
I was able to make it work, this is how I implemented the updater
now: 我能够使它工作,这就是我现在实现
updater
:
NewLinkSubscription(
proxyStore => {
const linkField = proxyStore.getRootField('Link')
const newLink = linkField.getLinkedRecord('node')
const viewerProxy = proxyStore.get(this.props.viewer.id)
const connection = ConnectionHandler.getConnection(viewerProxy, 'LinkList_allLinks', {
last: 100,
orderBy: 'createdAt_DESC'
})
if (connection) {
const edge = ConnectionHandler.createEdge(proxyStore, connection, newLink, 'allLinks')
ConnectionHandler.insertEdgeBefore(connection, edge)
}
},
error => console.log(`An error occurred:`, error),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.