reactjs - Reactjs/Apollo/AppSync Mutation Optimistic Response 解決済み ID

Question

したがって、最初に、ミューテーションに楽観的な応答を追加したことから始めます。これにより、ここで参照されているように、およびこの以前の SO questionから重複が生成されなくなります。

これですべて機能していますが、最初に async await を使用した後に実行される依存ミューテーションのセットがあります。

  submitForm = async () => {
    // Only submit if form is complete
    if (!this.state.saveDisabled) {
      try {
        // Optimistic Response is necessary because of AWS AppSync
        // https://stackoverflow.com/a/48349020/2111538
        const createGuestData = await this.props.createGuest({
          name: this.state.name,
        })
        let guestId = createGuestData.data.addGuest.id

        for (let person of this.state.people) {
          await this.props.createPerson({
            variables: {
              name: person.name,
              guestId,
            },
            optimisticResponse: {
              addPerson: {
                id: -1, // A temporary id. The server decides the real id.
                name: person.name,
                guestId,
                __typename: 'Person',
              },
            },
          })
        }

        this.setState({
          redirect: true,
        })
      } catch (e) {
        console.log(e)
        alert('There was an error creating this guest')
      }
    } else {
      Alert('Please fill out guest form completely.')
    }
  }

これで機能し、サンプル プロジェクトと同じミューテーション パターンを使用しています。

export default compose(
  graphql(CreateGuestMutation, {
    name: 'createGuest',
    options: {
      refetchQueries: [{ query: AllGuest }],
    },
    props: props => ({
      createGuest: guest => {
        console.log(guest)
        return props.createGuest({
          variables: guest,
          optimisticResponse: () => ({
            addGuest: {
              ...guest,
              id: uuid(),
              persons: [],
              __typename: 'Guest',
            },
          }),
        })
      },
    }),
  }),
  graphql(CreatePersonMutation, {
    name: 'createPerson',
  }),
)(CreateGuest)

唯一の問題は、Async Await を使用するときに実際に挿入される ID に状態を強制的に更新することができないため、すべての個人エントリがプレースホルダー UUID を取得することです。注意してください、私はid: -1createPerson 突然変異で行われたように使用しようとしましたが、それは何も変更しませんでした。すべての全体に負のものを使用しただけです。

これを行うより良い方法はありますか？私は何か間違ったことをしています。これはすべて optimisticResponse なしで機能しましたが、ミューテーションごとに常に 2 つのエントリが作成されました。