Reactjs / Apollo / AppSync Mutation Optimistic Response Resolved ID

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

Итак, все работает, но у меня есть набор зависимых мутаций, которые запускаются после первого использования 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, поэтому все записи о людях получают UUID заполнителя. Обратите внимание: я также пробовал использовать id: -1, как это сделано с мутацией createPerson, но это ничего не изменило, просто использовалось отрицательное значение для всех элементов.

Есть ли лучший способ сделать это? Я что-то не так делаю. Все это работало без optimisticResponse, но всегда создавало две записи на мутацию.


reactjs aws-appsync graphql react-apollo
person mikedklein    schedule 30.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Можешь попробовать еще раз? В SDK AppSync для Javascript были внесены улучшения, которые больше не требуют использования Optimistic Response. Вы можете использовать его по желанию, если вам все еще нужен оптимистичный интерфейс.

Кроме того, теперь вы также можете отключить автономный режим, если это не является требованием для вашего приложения, используя disableOffline следующим образом:

const client = new AWSAppSyncClient({
    url: AppSync.graphqlEndpoint,
    region: AppSync.region,
    auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: AppSync.apiKey,
    },
    disableOffline: true
});
person Richard    schedule 15.02.2018