Ретрансляция современных мутаций, RANGE_ADD / Append

У меня есть коллекция и мутация, чтобы добавить в нее новый элемент. Мне не удалось заставить Relay Modern обновить пользовательский интерфейс после успешной мутации.

У меня есть установка 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)
      // }
    },
  );
}

person Tim    schedule 15.09.2017    source источник


Ответы (1)


Что ж, я смог исправить это, изменив строку

@connection(key: "ContactsList_contacts")

To

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

Кажется, иначе он не смог бы найти связь...

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

Затем с помощью функции updater соединение было найдено.

person Tim    schedule 18.09.2017