Reactjs/Apollo/AppSync突变乐观响应已解析ID [英] Reactjs/Apollo/AppSync Mutation Optimistic Response Resolved ID

问题描述

所以首先我要说的是，我对突变添加了乐观的响应，这样它就会停止产生重复的引用，如所引用的问题.

So first off I will start by saying I added an optimistic response to my mutation so it would it stop producing duplicates as referenced here and from this previous S.O. question.

这一切正常，但是我有一组依赖突变，它们是在第一次使用异步等待后运行的.

So that is all working but I have a set of dependant mutations that run after the first using 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.')
    }
  }

现在这有效，并且它使用与示例项目相同的模式进行突变

Now this works and it is using the same pattern for the mutation as per the sample project

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: -1，就像对createPerson突变所做的那样，但这并没有改变任何东西，它只是对所有部分使用了负数.

The only problem is that I can't force the state to get updated to the ID that actually gets inserted when using Async Await, so all the person entries get the place holder UUID. Note, I have also tried using id: -1 as is done with the createPerson mutation but that didn't change anything, it just used negative one for all the entires.

是否有更好的方法?我做错了.这一切在没有optimisticResponse的情况下都是有效的，但每个突变总是创建两个条目.

Is there a better way of doing this? I am doing something wrong. This all worked without the optimisticResponse but it always created two entries per mutation.

推荐答案

您可以再试一次吗?适用于Java的AppSync SDK进行了增强，不再需要您使用乐观响应.如果您仍然需要乐观的用户界面，则可以选择使用它.

Can you try this again? There were enhancements to the AppSync SDK for Javascript which no longer require you to use Optimistic Response. You can use it optionally if you still want an optimistic UI.

此外，如果这不是您的应用程序所必需的，您现在还可以通过使用disableOffline来禁用离线功能，如下所示:

Additionally you can also now disable offline if that's not a requirement for your app by using disableOffline like so:

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

这篇关于Reactjs/Apollo/AppSync突变乐观响应已解析ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！