javascript - modern - ¿Cómo obtener la ID de un nuevo objeto a partir de una mutación?

relay vs apollo

Question

Tengo una mutación createObject que devuelve el ID del nuevo objeto.

Después de que vuelva, quiero redireccionar a una página de detalles sobre el nuevo objeto.

¿Cómo puedo obtener campos de respuesta de una mutación en el componente que contiene el uso de reaccionar / retransmitir?

Por ejemplo, mi página createObject contiene la mutación con código como:

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 debería ser el objeto creado por la mutación, pero ¿cómo puedo obtenerlo?

Answer 1

Normalmente configuraríamos el lado del cliente de la mutación con RANGE_ADD y devolveríamos un nuevo thingEdge del lado del servidor de la mutación, pero aquí no tenemos un rango en el cliente para agregar el nuevo nodo. Para decirle a Relay que busque un campo arbitrario, use la configuración REQUIRED_CHILDREN .

Mutación del lado del servidor

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

Mutación del lado del cliente

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
        }
      `],
    }];
  }
  /* ... */
}

Ejemplo de uso

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

Tenga en cuenta que cualquier campo que consulte mediante esta técnica estará disponible para la onSuccess llamada onSuccess , pero no se agregará a la tienda del lado del cliente.