![](/img/trans.png)
[英]Variable is not in scope error when relay-compiling Relay Modern code
[英]`updater` not working correctly when using subscriptions in Relay Modern
我在我的应用程序中使用了Relay Modern,并使用requestSubscription
功能成功集成了订阅。 一切正常,我用来更新缓存的updater
功能可以使用正确的订阅有效负载正确调用。
订阅用于将新项添加到Link
元素列表中。 这是订阅的样子:
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
)
}
然后我有一个LinkList
组件,它渲染所有的Link
元素。 在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
}
}
}
}
`)
现在,这是当有新Link
的订阅进入时发生的情况。正确调用updater
,似乎新节点正确插入连接(至少调用ConnectionHandler.insertEdgeAfter(connection, newLink)
)。
这会触发组件的重新呈现。 当我调试render
以检查数据( props.viewer.allLinks.edges
)时,我可以看到确实在连接中添加了一个新节点 - 所以列表实际上确实包含了另一个项目! 但是,问题是这个新节点实际上是undefined
,导致应用程序崩溃!
有没有人发现我在这里缺少的东西?
我能够使它工作,这就是我现在实现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.