添加新技能时，技能列表不会更新

Question

在背景组件中有技能和经验的手风琴。当单击技能手风琴上的标题时，模式将弹出技能表单，填写并提交后，模式将关闭，技能列表应该会更新，但不会更新。我必须刷新才能看到技能列表中的更改。我是这样做的：

class Background extends React.PureComponent {
  state = {
    show: false,
    componentName: null,
    activeIndex: 0
  };

  handleModal = (action, componentName) =>
    this.setState(state => ({
      show: action,
      componentName
    }));

  render() {
    const { show, activeIndex, componentName } = this.state;
    return (
      <React.Fragment>
        <ProfileWrapper>
          <Query query={BACKGROUND_QUERY}>
            {({
              data: { experiences, skills, languages, educations } = {},
              loading
            }) => {
              if (loading) {
                return <h1>Loading...</h1>;
              } else {
                return (
                  <Grid columns={2}>
                    <Accordion
                      index={1}
                      onToggle={this.handleToggle}
                      css="max-width: 100%; min-width: 200px;"
                    >
                      <Accordion.Title>
                        <Title>
                            Skills (
                            {`${skills !== undefined && skills.edges.length}`})
                        </Title>
                      </Accordion.Title>
                      <Accordion.Content>
                        <Content>
                          {skills !== undefined && skills.edges.length > 0 && (
                            <span>
                              {skills.edges.map(skill => {
                                return (
                                  <React.Fragment key={skill["node"].id}>
                                    <span key={skill["node"].id}>
                                      <Chip>{skill["node"].title}</Chip>
                                    </span>
                                  </React.Fragment>
                                );
                              })}
                            </span>
                          )}
                        </Content>
                      </Accordion.Content>
                    </Accordion>
                    <Modal
                      position="centerCenter"
                      open={show}
                      onClose={() => this.handleModal(false, null)}
                    >
                      <React.Fragment>
                        {componentName !== null &&
                          componentName === "experiences" && (
                            <Experiences experiences={experiences} />
                          )}
                        {componentName !== null &&
                          componentName === "skills" && (
                            <Skills skills={skills} />
                          )}

                      </React.Fragment>
                    </Modal>
                  </Grid>
                );
              }
            }}
          </Query>
        </ProfileWrapper>
      </React.Fragment>
    );
  }
}

export default Background;


const Skills = ({ handleSubmit, ...props }) => {
  const formSubmit = async (val, mutation) => {
    const {
      data: { skill: response }
    } = await mutation({
      variables: val
    });
    console.log('response', response);
    if (response.success) {
      props.closeModal();
      toast.success("New Skill Added!");
    }
  };
  return (
    <React.Fragment>
      <Mutation mutation={CREATE_SKILL}>
        {mutation => {
          return (
            <form onSubmit={handleSubmit(val => formSubmit(val, mutation))}>
              <Field name="title" label="Title" component={TextField} />
              <Button>
                <Button.Primary>Add Skill</Button.Primary>
                <Button.Secondary>Cancel</Button.Secondary>
              </Button>
            </form>
          );
        }}
      </Mutation>
    </React.Fragment>
  );
};

export default compose(
  reduxForm({
    form: "skillsProfile",
    enableReinitialize: true,
    destroyOnUnmount: false
  })
)(Skills);

当查询在后台组件中完成时，为什么乐观ui更新在这里不起作用？

Answer 1

从docs

我们需要一种方法来告诉Apollo客户端更新条目列表的查询。这就是更新函数的用武之地！

Apollo没有办法知道您的服务器在执行变异(添加一行或多行、删除一行等)时正在执行什么类型的操作--它所要做的就是变异返回的数据。它可以将这些数据与缓存中已有的对象进行匹配，并相应地更新它们，但仅此而已。如果有任何字段由于您的突变而被缓存并需要更新，您需要显式地告诉Apollo如何做到这一点(旁注，这些字段可以返回Skills列表，但它们也可以是受突变影响的任何其他字段)。

例如，用于添加技能的update函数将如下所示：

update={(cache, { data: { addSkill } }) => {
  // assumes addSkill resolves to a single Skill
  const { skills, ...rest } = cache.readQuery({ query: BACKGROUND_QUERY });
  cache.writeQuery({
    query: BACKGROUND_QUERY,
    data: { skills: skills.concat([addSkill]), ...rest },
  });
}}

有关其他示例，请参阅文档。

虽然可以重新获取您的查询(例如，通过将它们指定为refetchQueries的一部分)，但对于简单的缓存更新来说，这在很大程度上是不必要的，而且显然比只使用update要慢，因为它需要到服务器的另一次往返。此外，update甚至可以与optimistic updates to your UI一起使用。