![](/img/trans.png)
[英]`updater` not working correctly when using subscriptions in Relay Modern
[英]`updater` not working with Relay Modern because `ConnectionHandler.getConnection()` returns `undefined`
我正在为我的应用程序使用Relay Modern,并且尝试在使用updater
和optimisticUpdater
进行突变后更新缓存,但它不能正常工作。
基本上,我有一个带有votes
连接的Link
类型 - 这是我的架构的相关部分:
type Link implements Node {
createdAt: DateTime!
description: String!
id: ID!
postedBy(filter: UserFilter): User
url: String!
votes(filter: VoteFilter, orderBy: VoteOrderBy, skip: Int, after: String, before: String, first: Int, last: Int): VoteConnection
}
type Vote implements Node {
createdAt: DateTime!
id: ID!
link(filter: LinkFilter): Link!
updatedAt: DateTime!
user(filter: UserFilter): User!
}
# A connection to a list of items.
type VoteConnection {
# Information to aid in pagination.
pageInfo: PageInfo
# A list of edges.
edges: [VoteEdge]
# Count of filtered result set without considering pagination arguments
count: Int!
}
# An edge in a connection.
type VoteEdge {
# The item at the end of the edge.
node: Vote
# A cursor for use in pagination.
cursor: String
}
这是我的Link
组件的代码请求片段中的votes
:
class Link extends Component {
render() {
const userId = localStorage.getItem(GC_USER_ID)
return (
<div>
{userId && <div onClick={() => this._voteForLink()}>▲</div>}
<div>{this.props.link.description} ({this.props.link.url})</div>
<div>{this.props.link.votes.edges.length} votes | by {this.props.link.postedBy ? this.props.link.postedBy.name : 'Unknown'} {this.props.link.createdAt}</div>
</div>
)
}
_voteForLink = () => {
const userId = localStorage.getItem(GC_USER_ID)
const linkId = this.props.link.id
CreateVoteMutation(userId, linkId, this.props.viewer.id)
}
}
export default createFragmentContainer(Link, graphql`
fragment Link_viewer on Viewer {
id
}
fragment Link_link on Link {
id
description
url
createdAt
postedBy {
id
name
}
votes(last: 1000, orderBy: createdAt_DESC) @connection(key: "Link_votes", filters: []) {
edges {
node {
id
user {
id
}
}
}
}
}
`)
最后,这是带有updater
的CreateVoteMutation
:
const mutation = graphql`
mutation CreateVoteMutation($input: CreateVoteInput!) {
createVote(input: $input) {
vote {
id
link {
id
}
user {
id
}
}
}
}
`
export default (userId, linkId, viewerId) => {
const variables = {
input: {
userId,
linkId,
clientMutationId: ""
},
}
commitMutation(
environment,
{
mutation,
variables,
updater: (proxyStore) => {
const createVoteField = proxyStore.getRootField('createVote')
const newVote = createVoteField.getLinkedRecord('vote')
const viewerProxy = proxyStore.get(viewerId)
const connection = ConnectionHandler.getConnection(viewerProxy, 'Link_votes')
// `connection` is undefined, so the `newVote` doesn't get inserted
if (connection) {
ConnectionHandler.insertEdgeAfter(connection, newVote)
}
},
onError: err => console.error(err),
},
)
}
对ConnectionHandler.getConnection(viewerProxy, 'Link_votes')
的调用仅返回undefined
,因此实际上不会插入newVote
。
有谁看到我做错了什么?
问题:
当你得到你的连接时:
const connection = ConnectionHandler.getConnection(viewerProxy, 'Link_votes')
您正试图在ViewerProxy上获得“Link_votes”连接。 但是,您要做的是获取链接上的连接。
解:
首先,您需要获取添加投票的链接的ID。
const linkId = newVote.getLinkedRecord('link').getValue('id');
然后,您希望获得链接代理,以便您可以获得正确的连接。
const linkProxy = proxyStore.get(LinkId)
既然您拥有代表您想要连接的链接的链接代理,您现在可以获得该连接。
const connection = ConnectionHandler.getConnection(linkProxy, 'Link_votes')
很好,所以现在你已经有了联系。 这解决了你遇到的问题。
但是还有另一个问题,你继续添加投票的方式是错误的,首先需要创建一个Edge,然后添加边缘。
首先,我们需要创造一个优势
const voteEdge = createEdge(proxyStore, connection, newVote, 'VoteEdge');
现在我们有了voteEdge,我们可以将它附加到连接上。
ConnectionHandler.insertEdgeAfter(connection, voteEdge).
现在它应该全部工作。 但是,您可能不应该使用updater函数进行此类操作。 您应该使用RANGE_ADD配置https://facebook.github.io/relay/docs/mutations.html#range-add并更改服务器响应该突变的方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.