après le relais de mutation moderne gestionnaire de connexion est indéfini

Question

Je fais une mutation de plusieurs articles. Mais le gestionnaire de connexion dans le programme de mise à jour renvoie undefined. Je traite avec le type de shopItems, Voici le schéma correspondant

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] 
} 

c'est le fragment de requête de 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 
      } 
     } 
     } 
    } 
    ` 
) 

la mutation pour l'ajout shopItems retourne un tableau de 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); 
    } 
    } 

Pour une raison quelconque, la connexion renvoie undefined. Aussi quand je console.log viewerProxy, je vois la clé de connexion "item_shopItems" mais le nouveau bord n'apparaît pas là. Juste au cas où, j'utilise Node Js - Express côté serveur.

Un autre problème est que l'élément ajouté n'est pas au singulier, mais un tableau.

Answer 1

dont vous avez besoin à l'aide pour la requête de pagination 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 
     } 
     } 
    ` 
    } 
); 

Note: filters: [] à @connection sans after, first, before et last

la mutation:

/** 
* @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 };