Question

我试图通过突变在数组中创建一个新项目，然后根据UI进行更新。

我的模式如下：

account {
  id
  acronyms {
    id
    name
    description
  }
}

查询首字母缩写词

export const GET_ACRONYMS = gql`
  query Acronyms {
    acronyms {
      id
      name
      description
    }
  }
`;

我有一个create突变：

  mutation createAcronym($name: String, $description: String) {
    createAcronym(acronym: $name, description: $description) {
      __typename
      acronyms {
        __typename
        id
        name
        description           
      }
    }
  }

react渲染方法：

public render（）{ 返回（ {{{loading，error，data}）=> { 如果（加载）{ 回报; }

      if (error) {
        this.props.enqueueSnackbar('Unable to get acronyms', { variant: 'error' });
        throw error;
      }

      return (
        <Mutation
          mutation={mutations.createAcronym.mutation}
          onError={this.mutateError('Unable to create new acronym')}
        >
          {mutate => (
            <div>
              <Grid container={true}>{data.acronyms.map(this.renderAcronym)}</Grid>
              <Button color="primary" onClick={this.addAcronym.bind(this, mutate)}>
                <Add style={{ marginRight: 5 }} />
                Add Acronym
              </Button>
            </div>
          )}
        </Mutation>
      );
    }}
  </Query>
);

}

renderAcronym方法为首字母缩写词渲染一个突变和UI，这部分工作正常，我可以按预期编辑数据，并且UI和Backend都可以工作。

但是，当我单击Add Acronym时，可以看到成功创建了带有服务器响应的新首字母缩写词。我似乎无法做的是将此新首字母缩写附加到当前的GET_ACRONYMS查询中。如果我刷新页面，则会显示新创建的首字母缩写词，因为它现在由GET_ACRONYMS返回。

我当时想我的方法可能是错误的。我可以在此示例应用程序中看到他们正在使用订阅https://github.com/gsans/todo-apollo-v2-react/blob/master/src/App.js

我假设无需订阅即可完成此操作，我只需要让Apollo客户知道帐户>首字母缩略词中的这一新资源即可。我尝试查看更新方法，但没有成功。也尝试过refetchQueries: [GET_ACRONYMS]。

我也想删除这些资源，并相信我会遇到类似的问题：（

谢谢。

Answer 1

来自docs：

有时您执行突变时，您的GraphQL服务器和您的Apollo缓存不同步。当您执行的更新取决于缓存中已有的数据时，就会发生这种情况。例如，删除项目并将其添加到列表中。我们需要一种方法来告诉Apollo Client更新项目列表的查询。这就是更新功能的所在！并非所有更新都不需要更新功能来更新缓存，但是我们的addTodo变异就是一个很好用的例子。

换句话说，尤其是在查询某事的List时，您需要将update函数传递给Mutation组件。看起来您的变异返回了所有首字母缩写词，而不仅仅是创建的首字母缩写（？），因此您可以执行以下操作：

<Mutation
  mutation={mutations.createAcronym.mutation}
  onError={this.mutateError('Unable to create new acronym')}
  update={(cache, { data: { createAcronym: { acronyms } } }) => {
    cache.writeQuery({
      query: GET_ACRONYMS,
      data: { acronyms }
    })
  }}
>

如果您的变异仅返回创建的Acronym，则需要使用readQuery获取当前缓存的列表，然后添加到列表中。有关其他详细信息和示例，请参阅文档。

GraphQL Apollo React：创建具有变异的资源并更新UI流程

1 个答案: