从 graphql React HOC 返回一个 Promise答案

【问题标题】：Returning a Promise from graphql React HOC从 graphql React HOC 返回一个 Promise
【发布时间】：2018-01-30 09:53:00
【问题描述】：

我有一个表单，用于编辑我的应用程序中的现有资源。我有一个 React 组件，它以下列方式包装在 graphql HOC 中：

import {compose, graphql} from 'react-apollo';

// ...

const withData = compose(
  graphql(FetchEditorData, {
    props(p) {
      preloadEditorData() => {
        // this function is meant to return a promise with the desired data
        // the documentation only explains what p.data contains (i.e. loading,
        // data etc.)
      },
    },
  },
  graphql(CommitResourceEditMutation, {
    props(p) {
      onSubmit(editorState) => { /* ... */ },
  },
);

export default withData(ResourceEditor);

如您所见，组件从查询中读取数据，将其加载到表单中，并在提交表单时执行突变。

我需要在加载数据和保存更改时都显示加载指示器。通过遵循docs 状态的传统方法，我需要添加一个 loading prop 和一个 loading 状态键 并检查它们。

相反，我向我的组件添加了一个属性preloadEditorData，它旨在返回一个Promise<EditorState>，因此我只能拥有一个loading 标志。有什么方法可以从 HOC 返回 Promise？

【问题讨论】：

标签： reactjs graphql react-apollo

【解决方案1】：

您无需执行任何操作。它已经为你完成了！检查data.networkStatus 是否为1。这意味着您的数据正在加载。当它是7 时，它就完成了。

【讨论】：

我认为你误读了我的问题。这样做的全部目的不是要有两个 loading 标志；我不在乎这已经为我完成了。