Question

这是官方Apollo Docs的snippet，有助于预取。但是，我担心的是我没有使用功能组件而是使用类组件，而我无法看到客户端＆＃39;在班级的道具。

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。以下是我的代码对于需要数据的两个组件的外观：

BAR GRAPH

    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);

我希望在悬停条形图时预取折线图的数据（因为单击条形图上的项目应显示其折线图）。但是，我无法访问“客户端”＃39;虽然我已经在我的树中更高级地定义了apollo客户端而没有预取这个工作 - 但它很慢。

Answer 1

要使客户端进入组件的道具，请使用最后一行中的withApollo高阶组件，如果Apollo文档中的示例：

const FeedEntryWithApollo = withApollo(FeedEntry);

在你的例子中：

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

导出更高阶的组件，就像graphql中的react-apollo高阶组件一样。

在apollo-client中预取查询会有所反应

1 个答案: