react-apollo Query：从 <Query> 组件获取数据的正确方法答案

【问题标题】：react-apollo Query: Correct way to get the data from a <Query> Componentreact-apollo Query：从 <Query> 组件获取数据的正确方法
【发布时间】：2020-01-09 15:40:13
【问题描述】：

我正在尝试将 Query 组件中的数据转换为我可以呈现的内容。我有这个执行查询的函数，我的组件的渲染方法调用这个函数。我的问题是，如何将数据转化为我可以使用的东西？

查询函数：

protected queryFoos() {
  const { match: { params } } = this.props;
  const projectId  = params.projectId;
  const { query, dataKey } = fooGql.list;

  return (
    <Query query={query} variables={{ [RouteId.Project]: projectId }}>

      {({ data, error, loading }: QueryResult) => {
        if (loading) { return <div>Loading...</div>; }
        if (error) { return <div>{error}</div>; }

        const listFoos = plainToClassFromExist(new Foo(), data);
        const variablesList = data.listFoos.items;
        // this.setState({ foos: foosList}); // <= this doesn't work

        return listFoos;
       }}

    </Query>
  )
}

还有我调用查询函数的组件：


...

state = {
  foos: [],
}

protected renderContent(project: Project) {
  // query all foos related to the project

  return (
    {project &&
          <Grid container alignItems="stretch">
            <Grid item xs={12}<Typography>Foos</Typography></Grid>
              <Grid item xs={12}>
                {this.queryFoos()}
                <EntityTable entities={this.state.foos}/>
              </Grid>
          </Grid>
       </Grid>
    }
  );
}

【问题讨论】：

你试过{console.log(this.queryFoos())}吗？
我刚试过，它返回了一些 Symbol 对象。我的想法是在查询中设置本地设置状态。
你返回data然后控制台记录呢？
采用了不同的方法。使用 store.client.query 方法获取值，并从 componentDidMount 调用它。

标签： reactjs typescript graphql react-apollo

【解决方案1】：

<Query> 组件旨在以渲染道具模式的形式提供数据，所以它应该是这样的

  <Grid item xs={12}>
    <Query query={query} variables={{ [RouteId.Project]: projectId }}>
      {({ data, error, loading }: QueryResult) => {
        // ... processing data into listFoos ...
        return
          loading ? <div>Loading</div>
          : error ? <div>{error}</div>
          : <EntityTable entities={listFoos} />;
      }}
    </Query>
  </Grid>

...利用渲染道具模式从组件设置状态是一项额外的工作，如果我真的需要它，我会考虑使用不同的模式，例如withQuery HOC 覆盖整个组件（通过它您可以将结果用作组件的道具，即在整个组件中可用），提供查询需求道具（例如变量）有点不同，但文档非常清楚关于如何做到这一点（通常这些需要是整个组件的道具）；或新的useQuery 钩子。

如果您只需要抽象出一些查询设置/结果处理，您可以在查询上创建一个组件：

const QueryFoos = (props: RequiredProps) => {
  // setup
  return (
    <Query query={query} variables={{ [RouteId.Project]: projectId }}>
      {({ data, error, loading }: QueryResult) => {
        // ... processing data into fooList ...
        return props.children({ data: fooList, error, loading });
      }}
    </Query>
  );
}

并像使用它

  <Grid item xs={12}>
    <QueryFoos {...requiredProps}>
      {({ data, error, loading }) =>
        loading ? <div>Loading</div>
        : error ? <div>{error}</div>
        : <EntityTable entities={listFoos} />}
    </QueryFoos>
  </Grid>

这很清楚。

【讨论】：