`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`
Posted
技术标签:
【中文标题】`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`【英文标题】:`updater` not working with Relay Modern because `ConnectionHandler.getConnection()` returns `undefined` 【发布时间】:2017-11-27 23:30:23 【问题描述】:我正在为我的应用程序使用 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
组件在片段中请求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
`)
最后,这是CreateVoteMutation
和updater
:
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
实际上并没有被插入。
有人看到我做错了吗?
【问题讨论】:
我认为这是因为无法访问“Link_votes”连接。 【参考方案1】:问题:
当您获得连接时:
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')
Sweet 所以现在你已经建立了联系。这解决了您遇到的问题。
但是还有一个问题,你继续添加投票的方式是错误的,首先你需要创建一个边缘,然后添加边缘。
首先我们需要创建一条边
const voteEdge = createEdge(proxyStore, connection, newVote, 'VoteEdge');
现在我们有了 voteEdge,我们可以将它附加到连接中。
ConnectionHandler.insertEdgeAfter(connection, voteEdge).
现在应该一切正常了。但是,您可能不应该将更新程序功能用于此类操作。您应该使用 RANGE_ADD 配置 https://facebook.github.io/relay/docs/mutations.html#range-add 并更改您的服务器对该突变的响应方式。
【讨论】:
以上是关于`updater` 不适用于 Relay Modern,因为 `ConnectionHandler.getConnection()` 返回 `undefined`的主要内容,如果未能解决你的问题,请参考以下文章
MySQL 查询适用于 SELECT 但不适用于 UPDATE 语句
SQL UPDATE 命令不适用于 Command.Parameters.Add/AddWithValue [重复]
GROUP BY不适用于MySQL 5.7,因为5.7使用SQL_MODE的“ONLY_FULL_GROUP_BY”选项。