突變後繼電器現代連接處理程序未定義

Question

我正在做多個項目的突變。但是updater中的連接處理程序返回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不是單數，而是一個數組。

Answer 1

需要使用分頁的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沒有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 };