mutation relay 후 현대 연결 핸들러가 정의되지 않았습니다.

Question

나는 여러 항목의 돌연변이를하고 있습니다. 그러나 updater의 연결 처리기는 정의되지 않은 값을 반환합니다. 나는 여기에 추가 shopItems의 돌연변이가 addedItems의 배열을 반환

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 쿼리에 대한 단편

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 유형을 취급하고있어

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