apollo-client 中的预取查询响应答案

【问题标题】：Pre-fetching queries in apollo-client reactapollo-client 中的预取查询响应
【发布时间】：2018-07-17 17:51:25
【问题描述】：

这是来自官方 Apollo Docs 的 snippet，它有助于预取。但是，我担心的是我没有使用功能组件，而是使用类组件，并且我无法在类的道具中看到“客户端”。

const FeedEntry = ({ entry, currentUser, onVote, client }) => {
  const repoLink = `/${entry.repository.full_name}`;
  const prefetchComments = (repoFullName) => () => {
    client.query({
      query: COMMENT_QUERY,
      variables: { repoName: repoFullName },
    });
  };

  return (
    <div className="media">
      ...
      <div className="media-body">
        <RepoInfo
          description={entry.repository.description}
          stargazers_count={entry.repository.stargazers_count}
          open_issues_count={entry.repository.open_issues_count}
          created_at={entry.createdAt}
          user_url={entry.postedBy.html_url}
          username={entry.postedBy.login}
        >
          <Link to={repoLink} onMouseOver={prefetchComments(entry.repository.full_name)}>
              View comments ({entry.commentCount})
          </Link>
        </RepoInfo>
      </div>
    </div>
  );
};

const FeedEntryWithApollo = withApollo(FeedEntry);

我也在使用 Graphql。对于两个需要数据的组件，我的代码如下所示：

条形图

    class BarGraphData extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            data: {}
            }
        }
       componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data ? nextProps.data : {}
        });
       }
      render(){ 
        return (<BarGraph data={this.state.data} />) 
      }
    }

export default graphql(BAR_GRAPH_QUERY, {
options: ({ year, month, name  }) => ({
    variables: { year, month, name }
})
 })(BarGraphData);

折线图：

    class LineGraphData extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            data: {}
            }
        }
       componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data ? nextProps.data : {}
        });
    }
       render(){ 
        return (<LineGraph data={this.state.data} />) 
        }
    }

   export default graphql(LINE_GRAPH_QUERY, {
   options: ({ year, month, name  }) => ({
    variables: { year, month, name }
   })
   })(LineGraphData);

我想在悬停条形图时为折线图预取数据（因为单击条形图上的项目应显示其折线图）。然而，我无法访问“客户端”，尽管我已经在树的较高位置定义了阿波罗客户端并且没有预取这个工作 - 但它很慢。

【问题讨论】：

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

如果 Apollo 文档中的示例，要让客户端进入组件的 props，请使用 withApollo 高阶组件，如最后一行中所做的那样：

const FeedEntryWithApollo = withApollo(FeedEntry);

在你的例子中：

export default withApollo(
  graphql(BAR_GRAPH_QUERY, {
    options: ({ year, month, name  }) => ({
      variables: { year, month, name }
    })
  })(LineGraphData)
);

高阶组件与react-apollo 中的graphql 高阶组件一样导出。

【讨论】：