![](/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.