我正在为我的应用程序使用 Relay Modern,并尝试使用 updater
and 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
组件在片段中请求投票
的代码:
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')
太好了,现在您已经建立连接了。这解决了您遇到的问题。
但是还有一个问题,您继续添加投票的方式是错误的,您首先需要从中创建一条边,然后添加该边。
首先我们需要创建一条边
const voteEdge = createEdge(proxyStore, connection, newVote, 'VoteEdge');
现在我们有了 voteEdge,我们可以将其附加到连接中。
ConnectionHandler.insertEdgeAfter(connection, voteEdge)。
现在应该一切正常了。但是,您可能不应该使用更新程序功能来执行此类操作。您应该使用 RANGE_ADD 配置 https://facebook.github.io/relay/docs/mutations.html#range-add并更改您的服务器响应该突变的方式。
关于reactjs - `updater` 无法与 Relay Modern 配合使用,因为 `ConnectionHandler.getConnection()` 返回 `undefined`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44737454/