Question

我已经设置了React + Apollo，后端使用的是Django / Graphene。我有一个创建列表项的变体，乐观响应对此也很好。我进行了第二次更新，更新了此项目的详细信息字符串，这也乐观地正常工作。

问题是，如何在不等待服务器响应的情况下更改创建乐观响应？

即

单击按钮创建项目A
将乐观的回应添加到列表中
单击按钮可以改变乐观的反应
服务器错误，表明乐观响应中的ID不存在

（所有步骤1创建仍在服务器上挂起）。

查询：

const ADD_APPOINTMENT = gql`
mutation($details: String!) {
  addAppointment(details:$details) {
    appointment{
      id
      aptType
      details
    }
  }
}
`;
const UPDATE_APPOINTMENT = gql`
  mutation($id: String!, $details: String!) {
    updateAppointment(id:$id, details:$details) {
      appointment{
        id
        details
      }
    }
  }
`;

渲染

const AddAppointment = () => {
  let input;

  return (
    <Mutation mutation={ADD_APPOINTMENT}>
      {(addAppointment, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addAppointment({
                variables: { details: input.value },
                update: (proxy, { data: { addAppointment } }) => {
                  // Read the data from our cache for this query.
                  const data = proxy.readQuery({ query: APPOINTMENT_LIST });
                  const { appointment } = addAppointment;
                  // Add our comment from the mutation to the end.
                  data.allAppointments.push(appointment);
                  // Write our data back to the cache.
                  proxy.writeQuery({ query: APPOINTMENT_LIST, data });
                },
                optimisticResponse: {
                  __typename: "Mutation",
                  addAppointment: {
                    __typename: "Mutation",
                    appointment: {
                      id: uuid(),
                      __typename: "AppointmentType",
                      details: input.value,
                      aptType: "something",
                    }
                  }
                }
              });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Event</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

挠挠物品细节的挠音。

const Tickle = ({ id, details }) => {
  const newDesc = `${details}+`;

  return (
    <Mutation mutation={UPDATE_APPOINTMENT}>
      {(updateAppointment, { data }) => (
        <div>
          <form
            onSubmit={e => {
              console.log(id, details, newDesc);
              e.preventDefault();
              updateAppointment({
                variables: { details: newDesc, id },
                optimisticResponse: {
                  __typename: "Mutation",
                  updateAppointment: {
                    __typename: "Mutation",
                    appointment: {
                      id,
                      __typename: "AppointmentType",
                      details: newDesc,
                      aptType: "something",
                    }
                  }
                }
              });
            }}
          >
            <button type="submit">Bump</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

我希望更新突变能够等到该项目的创建突变完成之后，这将防止服务器收到不合常理的标识符，但是当前更新仅会触发，并且服务器错误无法识别临时uuid。

如何阻止更新变异的发送，直到创建的变异返回但仍然保持乐观地更新所有内容？

在Relay中，有一个碰撞键的概念，它将强制顺序执行同一键的突变。我在这里找不到相同的概念。

如何改变阿波罗的乐观反应？

0 个答案: