[英]Relay Modern Mutations, RANGE_ADD / Append
I have a collection and a mutation to add a new item to it. 我有一个收藏夹和一个向其添加新商品的变体。 I haven't been able to get Relay Modern to update the UI after a successful mutation.
成功进行突变后,我无法让Relay Modern更新UI。
I've got a PaginationContainer
setup with the following query:
prop 我有一个带有以下
query:
的PaginationContainer
设置query:
prop
{
query: graphql`
fragment ContactsList_query on WPQuery {
id
contacts: posts(
first: $count,
after: $cursor
post_type: $postType,
order: $order,
category_name: $categoryName
) @connection(key: "ContactsList_contacts" ) {
edges {
node {
id
...ContactListItem_contact
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`
},
That fetches correctly. 正确获取。 I've then got a mutation to add a contact to this list.
然后,我做了一个变异,将联系人添加到此列表中。 Neither the config
RANGE_ADD
or the updater:
callback techniques work at all. config
RANGE_ADD
或updater:
回调技术根本不起作用。
I'm triggering this mutation like so 我像这样触发这种突变
onSave = (fields) => {
insertPost(
fields.toJS(),
this.props.query.id,
this.props.relay.environment
);
}
No errors, just nothing updates. 没有错误,只有更新。
const mutation = graphql`
mutation InsertPostMutation(
$data: InsertPostInput!
) {
insert_post(input: $data) {
wp_query {
id
}
postEdge {
node {
id
title
}
}
}
}
`;
export default function insertPost(data, id, environment) {
const variables = {
data,
};
commitMutation(
environment,
{
mutation,
variables,
onCompleted: (response, errors) => {
console.log('Response received from server.')
},
onError: err => console.error(err),
configs: [{
type: 'RANGE_ADD',
parentID: id,
connectionInfo: [{
key: 'ContactsList_contacts',
rangeBehavior: 'append',
}],
edgeName: 'postEdge'
}],
// updater: (store) => {
// // const inspector = new RecordSourceInspector(store)
// const payload = store.getRootField('insert_post')
// const newEdge = payload.getLinkedRecord('postEdge')
// const proxy = store.get(id)
// // Conn is always undefined here
// const conn = ConnectionHandler.getConnection(proxy, 'ContactsList_contacts')
// ConnectionHandler.insertEdgeAfter(conn, newEdge)
// }
},
);
}
Well, I was able to fix this by changing the line 好吧,我可以通过更改线来解决此问题
@connection(key: "ContactsList_contacts")
To 至
@connection(key: "ContactsList_contacts", filters: [])
Seems it couldn't find the connection otherwise... 似乎无法找到连接...
https://facebook.github.io/relay/docs/pagination-container.html#connection-directive https://facebook.github.io/relay/docs/pagination-container.html#connection-directive
Then using the updater
function the connection was found. 然后使用
updater
功能找到连接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.