从外部使用 Apollo GraphQL 重新获取方法答案

【问题标题】：Using Apollo GraphQL refetch method from outside从外部使用 Apollo GraphQL 重新获取方法
【发布时间】：2019-02-13 17:29:12
【问题描述】：

我的渲染函数

translateFileAndRefetchQuery = (urn) => {
    translateFile(urn);
    // How do I refetch data from here?
  };

render() {
    const translateFormatter = (cell, row) => {
      return (
        <span>
          <Button
            onClick={() => translateFileAndRefetchQuery(row.urn)}
          >
            Translate
          </Button>
        </span>
      );
    };

    const columns = [
      {
        dataField: 'name',
        text: 'Name',
      },
      {
        dataField: 'lastUpdated',
        text: 'Last updated',
      },
      {
        dataField: 'lastTranslated',
        text: 'Translate',
        formatter: translateFormatter,
      },
    ];

    return (
      <>
        <h3>Models</h3>
        <h4>Root > Plans</h4>

        {this.state.plansFolderUrn != null &&
        <Query query={getProjects()}>
          {(data, refetch) => (
            <>
              <BootstrapTable
                keyField="name"
                data={data.projects}
                columns={columns}
              />
            </>
          )}
        </Query>
        }
      </>
    );
  }

我正在使用具有refetch 方法的阿波罗数据获取器。我需要从Query 之外调用它。

我该怎么做？

【问题讨论】：

将refetch 作为道具传递，并以函数作为参数返回。或使用graphql HOC
你能在我上面的代码中给出一个代码示例吗？
translateFileAndRefetchQuery 在哪里调用以及何时需要重新获取数据？
抱歉。代码已更新。我想在 translateFile() 运行后重新获取。

标签： javascript reactjs react-apollo

【解决方案1】：

您可以在不同的回调中传递函数。我在translateFormatter 中添加了一个装饰器以不立即调用它：

translateFileAndRefetchQuery = (urn, refetch) => {
    translateFile(urn);
    refetch();
};

render() {
    const translateFormatter = refetch => (cell, row) => {
        return (
            <span>
                <Button
                    onClick={() => translateFileAndRefetchQuery(row.urn, refetch)}
                >
                    Translate
        </Button>
            </span>
        );
    };

    const getColumns = refetch => [
        {
            dataField: 'name',
            text: 'Name',
        },
        {
            dataField: 'lastUpdated',
            text: 'Last updated',
        },
        {
            dataField: 'lastTranslated',
            text: 'Translate',
            formatter: translateFormatter(refetch),
        },
    ];

    return (
        <>
            <h3>Models</h3>
            <h4>Root > Plans</h4>

            {this.state.plansFolderUrn != null &&
                <Query query={getProjects()}>
                    {(data, refetch) => (
                        <>
                            <BootstrapTable
                                keyField="name"
                                data={data.projects}
                                columns={getColumns(refetch)}
                            />
                        </>
                    )}
                </Query>
            }
        </>
    );
}

【讨论】：