Как получить идентификатор нового объекта из мутации?

У меня есть мутация createObject, которая возвращает идентификатор нового объекта.

После того, как он вернется, я хочу перенаправить на страницу сведений о новом объекте.

Как я могу получить поля ответа от мутации в содержащем компоненте, используя реакцию/ретрансляцию?

Например. моя страница createObject содержит мутацию с кодом вроде:

var onFailure = (transaction) => {

};

var onSuccess = () => {
  redirectTo('/thing/${newthing.id}');   // how can I get this ID?
};

// To perform a mutation, pass an instance of one to `Relay.Store.update`
Relay.Store.update(new AddThingMutation({
  userId: this.props.userId,
  title: this.refs.title.value,
}), { onFailure, onSuccess });
}

newthing должен быть объектом, созданным мутацией, но как мне его получить?


reactjs javascript relayjs
person jbrown    schedule 12.09.2015    source источник

Ответы (1)


arrow_upward
19
arrow_downward

Обычно мы настраиваем клиентскую часть мутации с помощью RANGE_ADD и возвращаем новую thingEdge со стороны сервера мутации, но здесь у вас нет диапазона на клиенте, в который можно добавить новый узел. Чтобы указать Relay для получения произвольного поля, используйте конфигурацию REQUIRED_CHILDREN.

Мутация на стороне сервера

var AddThingMutation = mutationWithClientMutationId({
  /* ... */
  outputFields: {
    newThingId: {
      type: GraphQLID,
      // First argument: post-mutation 'payload'
      resolve: ({thing}) => thing.id,
    },
  },
  mutateAndGetPayload: ({userId, title}) => {
    var thing = createThing(userId, title);
    // Return the 'payload' here
    return {thing};
  },
  /* ... */
});

Мутация на стороне клиента

class AddThingMutation extends Relay.Mutation {
  /* ... */
  getConfigs() {
    return [{
      type: 'REQUIRED_CHILDREN',
      // Forces these fragments to be included in the query
      children: [Relay.QL`
        fragment on AddThingPayload {
          newThingId
        }
      `],
    }];
  }
  /* ... */
}

Пример использования

var onFailure = (transaction) => {
  // ...
};

var onSuccess = (response) => {
  var {newThingId} = response.addThing;
  redirectTo(`/thing/${newThingId}`);
};

Relay.Store.update(
  new AddThingMutation({
    title: this.refs.title.value,
    userId: this.props.userId,
  }), 
  {onSuccess, onFailure}
);

Обратите внимание, что любые поля, которые вы запрашиваете с помощью этой техники, будут доступны для обратного вызова onSuccess, но не будут добавлены в хранилище на стороне клиента.

person steveluscher    schedule 13.09.2015
comment
У нас есть проблема GitHub, открытая для улучшения и документирования этой части API мутаций. Если у вас есть отзывы или идеи, перейдите на github.com/facebook/relay/issues. /237 - person steveluscher; 13.09.2015
comment
Спасибо приятель. Этот стек просто потрясающий :-) - person jbrown; 13.09.2015
comment
@steveluscher можно ли получить данные в хранилище? - person Dmitry Minkovsky; 04.02.2016
comment
REQUIRED_CHILDREN не пишет в магазин. Вы можете создать новый пользовательский интерфейс, использующий newThingId (имеющий собственные фрагменты Relay), который запускает минимальный запрос к серверу для получения и записи нового дерева данных. - person steveluscher; 05.02.2016