Question

我有一个表单，它用于编辑我的应用程序中的现有资源。我有一个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那里回复承诺吗？

Answer 1

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

更多信息：http://dev.apollodata.com/react/api-queries.html#graphql-query-data-networkStatus

从graphql返回承诺React HOC

1 个答案: