中继现代突变，RANGE_ADD / Append

Posted 2023-03-08

【中文标题】中继现代突变，RANGE_ADD / Append

【英文标题】：Relay Modern Mutations, RANGE_ADD / Append

【发布时间】：2018-02-24 02:53:24

【问题描述】：

我有一个集合和一个突变来添加一个新项目。在成功突变后，我无法让 Relay Modern 更新 UI。

我有一个 PaginationContainer 设置，带有以下 query: 道具

  
    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
            
          
      
  `
  ,

正确获取。然后我有了一个突变，可以将联系人添加到此列表中。 配置RANGE_ADD 或updater: 回调技术根本不起作用。

我正在像这样触发这个突变

 onSave = (fields) => 
    insertPost(
      fields.toJS(),
      this.props.query.id,
      this.props.relay.environment
    );
  

没有错误，只是没有更新。

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)
      // 
    ,
  );

【参考方案1】：

嗯，我可以通过换行来解决这个问题

@connection(key: "ContactsList_contacts")

到

@connection(key: "ContactsList_contacts", filters: [])

似乎找不到连接，否则...

https://facebook.github.io/relay/docs/pagination-container.html#connection-directive

然后使用updater 函数找到连接。