![](/img/trans.png)
[英]Relay Modern - Subscription updater(connection handler) method (no documentation on this matter)
[英]after mutation relay modern connection handler is undefined
我正在對多個項目進行突變。 但是更新程序中的連接處理程序返回未定義。 我正在處理shopItems類型,這是相關的架構
type Mutation {
shopItem(input: itemsInput): addedItems
}
type addedItems {
addedItems: [itemEdge]
}
type itemEdge {
cursor: Int
node: itemNode
}
type itemNode implements Node {
id: ID!,
name: String,
price: Int
}
type Root {
viewer: viewer
}
type viewer {
id: ID!
shopItems(ShopId: ID, SubCategoryId:ID, first:Int, last: Int): Item
}
type Item {
pageInfo: PageInfo
edges: [itemEdge]
}
這是shopItems查詢的片段,
module.exports = createFragmentContainer(
Item,
graphql`
fragment item_viewer on viewer {
// the global parent viewer id
id,
shopItems(first:$first,last:$last,ShopId:$ShopId,SubCategoryId:$SubCategoryId) @connection(key: "item_shopItems",filters:["first","last"]){
// didn't want the pageInfo here yet but relay compiler enforces this because of @connection. It's basically returning null.
pageInfo {
hasNextPage
endCursor
}
edges {
cursor // returns null as well
node {
id
name
price
}
}
}
}
`
)
添加shopItems的變異會返回addedItems數組,
mutation addShopItemMutation($input: itemsInput) {
shopItem(input: $input) {
addedItems {
node {
id
name
price
}
}
}
}
commitMutation(
environment,
{
...
updater: (store) => {
const payload = store.getRootField('shopItem');
//I've seen everyone using getLinkedRecord, but in my case the mutation return type is an array and it gives an error so I'm using getLinkedRecords. I think this is where the problem lies.
const newItem = payload.getLinkedRecords('addedItems');
this.sharedUpdate(store, this.props.viewerId, newItem)
}
})
sharedUpdate(store, viewerId, newItem) {
//viewerProxy here is not undefined
const viewerProxy = store.get(viewerId);
//conn is undefined
const conn = ConnectionHandler.getConnection(
viewerProxy,
'item_shopItems',
);
if(conn) {
ConnectionHandler.insertEdgeAfter(conn, newItem);
}
}
由於某種原因,連接返回未定義。 另外,當我console.log viewerProxy時,我確實看到了連接鍵“ item_shopItems”,但是新邊緣沒有出現在此處。 以防萬一,我在服務器端使用Node Js-Express。
另一個問題是,addedItem不是單數,而是數組。
您需要對shopItems查詢使用分頁:
module.exports = createPaginationContainer(
ShopItems,
{
viewer: graphql`
fragment ShopItems_viewer on Viewer {
id
shopItems(
first: $count
after: $cursor
ShopId: $ShopId
SubCategoryId: $SubCategoryId
)
@connection(
key: "ShopItems_shopItems"
filters: ["ShopId", "SubCategoryId"]
) {
edges {
cursor
node {
id
name
price
}
}
}
}
`
},
{
direction: 'forward',
getConnectionFromProps(props) {
return props.viewer.shopItems;
},
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount
};
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count,
cursor,
ShopId: fragmentVariables.ShopId,
SubCategoryId: fragmentVariables.SubCategoryId
};
},
query: graphql`
query ShopItemsQuery(
$count: Int!
$cursor: String
$ShopId: ID
$orderBy: ID
) {
viewer {
...ShopItems_viewer
}
}
`
}
);
注意: filters: []
@connection
filters: []
,不帶after
, first
, before
和last
突變:
/**
* @flow
*/
import { commitMutation, graphql } from 'react-relay';
import { ConnectionHandler } from 'relay-runtime';
import environment from '../utils/createRelayEnvironment';
type Options = {
onSuccess: Function,
onFailure: Function
};
const defaultCallbacks: Options = { onSuccess: () => {}, onFailure: () => {} };
const mutation = graphql`
mutation AddShopItemMutation($input: itemsInput) {
shopItem(input: $input) {
addedItems {
cursor
node {
id
name
price
}
}
}
}
`;
function sharedUpdater(store, viewer, addedItemsEdge, nameConnection, filters) {
const viewerProxy = store.get(viewer.id);
const connection = ConnectionHandler.getConnection(
viewerProxy,
nameConnection,
filters // your connection undefined is do missing filters
);
if (connection) {
ConnectionHandler.insertEdgeBefore(connection, addedItemsEdge);
}
}
let nextClientMutationId = 0;
function commit(
viewer: Object,
input: Object,
nameConnection: string,
filters: Object, // { ShopId: ID, SubCategoryId: ID };
// const { ShopId, SubCategoryId } = this.context.relay.variables
cb: Options = defaultCallbacks
): any {
nextClientMutationId += 1;
return commitMutation(environment, {
mutation,
variables: {
input: {
...input,
clientMutationId: nextClientMutationId
}
},
onCompleted: cb.onSuccess,
onError: cb.onFailure,
updater(store) {
const payload = store.getRootField('addShopItem');
sharedUpdater(
store,
viewer,
payload.getLinkedRecords('addedItems'),
nameConnection,
filters
);
}
});
}
export default { commit };
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.