如何触发突变,react + Apollo 2.1

How to Trigger a Mutation, react + Apollo 2.1

我有一个点击按钮时触发的突变,returns 结果。现在我很想在收到该结果时触发另一个突变,并在下一个突变中使用该结果。

所以基本上..

  1. 点击时调用突变。
  2. 突变产生结果。
  3. 收集结果。
  4. 根据收集到的结果,使用该结果触发另一个突变。

这方面的任何示例都会有很大帮助。

这是我目前所拥有的

_renderSubmitButton = () => {
const { firstName, lastName, email, dateOfBirth, phone } = this.state.fields;
const { isSaving } = this.state
return (

  <Mutation
    mutation={CREATE_PERSON_MUTATION}
    refetchQueries={() => [{ query: PERSON_QUERY }]}
    onCompleted={this._handleServerResponse}
    onError={this._handleServerError}
  >
    {
      (createPerson, { loading, data, error } ) => {   return (

          <Button
            primary
            disabled={!(firstName && lastName && dateOfBirth && email && !_.isEmpty(phone.number) && !_.isEmpty(phone.type))}
            onClick={() => this._submit({ createPerson, data, error, loading })}
            loading={this.state.isSaving}
          >
            Save <Icon name='right chevron' style={style.iconPad} />

          </Button>
        )
      }
    }
  </Mutation>
)
}

    _submit = async ({ createPerson, data, error, loading }) => {
    this.setState((prevState) => ({ isSaving: true }));

    const person = this._buildPersonData();

    createPerson({ variables: { person } })
    .then((resp) => {
      console.log(resp.data.createPerson.personID);
      if(resp.data.createPerson.personID){
        this.setState({
          gottenID: true,
          accessID: resp.data.createPerson.personID
        });
      }

    })
   //TRIGGER ANOTHER MUTATION
  };

您可以连接或组合它们,检查 this library

实际上,组合它们,你可以这样做:

const handleClick = async (mutation1Fn, mutation2Fn) => {
  const data1 = await mutation1Fn()
  const data2 = await mutation2Fn()
}

const Mutations = () => (
  <Composer
    components={[
      <Mutation mutation={mutation1} />,
      <Mutation mutation={mutation2} />
    ]}
  >
    {([mutation1Fn, mutation2Fn]) => (
      <button
        onClick={() => handleClick(mutation1Fn, mutation2Fn)}
      >
        exec!
      </button>
    )}
  </Composer>
)

如果您遇到困难,请告诉我!