小编rma*_*her的帖子

2018年更新: Apollo Client 2.1添加了一个新的Mutation组件,用于添加加载属性.请参阅下面的@ robin-wieruch的答案以及此处的公告https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926继续阅读原始问题,该问题现在仅适用于早期版本的Apollo.

使用(v0.5.2)中当前版本的graphql高阶组件react-apollo,我没有看到一种记录方式来通知我的UI突变正在等待服务器响应.我可以看到该软件包的早期版本将发送一个指示加载的属性.

查询仍然会收到如下所示的加载属性:http://dev.apollodata.com/react/queries.html#default-result-props

我的应用程序也使用redux,所以我认为一种方法是将我的组件连接到redux并传递一个函数属性,使我的UI进入加载状态.然后当我将graphql变异重写为属性时,我可以调用更新redux存储.

大致像这样:

function Form({ handleSubmit, loading, handleChange, value }) {
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="something"
        value={value}
        onChange={handleChange}
        disabled={loading}
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Loading...' : 'Submit'}
      </button>
    </form>
  );
}

const withSubmit = graphql(
  gql`
    mutation submit($something : String) {
      submit(something : $something) {
        id
        something
      }
    }
  `, 
  {
    props: ({ ownProps, mutate }) => ({
      async handleSubmit() { …