react-apollo - 当新订阅到达 react-apollo 时如何重新获取查询

Question

我想知道当订阅接收到新数据时是否有一种优雅的方式来触发react-apollo中查询的重新获取(数据在这里并不重要，将与前一个相同)。我只是在这里使用订阅作为通知触发器，告诉 Query 重新获取。

我尝试使用 Subscription 组件和 subscribeToMore 在 Query 的子组件中调用“refetch”方法，但这两种方法都会导致无限重新获取。

注意:我正在使用 react-apollo v2.1.3 和 apollo-client v2.3.5

这是代码的简化版本

<Query
  query={GET_QUERY}
  variables={{ blah: 'test' }}
>
  {({ data, refetch }) => (
    <CustomComponent data={data} />
    //put subscription here? It'll cause infinite re-rendering/refetch loop
  )}
<Query>

Answer 1

最后，我从佩德罗的回答中得到灵感，自己弄清楚了。

感想:我面临的问题是我想在 Subscription 中调用 Query 的 refetch 方法，但是 Query 和 Subscription 组件都只能在 render 方法中访问。这是无限重新获取/重新渲染的根本原因。为了解决这个问题，我们需要将订阅逻辑从 render 方法中移出，并将其放在生命周期方法中的某个位置(即 componentDidMount)，在触发 refetch 后不会再次调用它。然后我决定使用 graphql hoc 而不是 Query 组件，这样我就可以在我的组件的顶层注入(inject)像 refetch、subscribeToMore 这样的 props，这使得它们可以从任何生命周期方法中访问。

代码示例 (简化版):

class CustomComponent extends React.Component {
  componentDidMount() {
    const { data: { refetch, subscribeToMore }} = this.props;

    this.unsubscribe = subscribeToMore({
      document: <SUBSCRIBE_GRAPHQL>,
      variables: { test: 'blah' },
      updateQuery: (prev) => {
        refetch();
        return prev;
      },     
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { data: queryResults, loading, error } } = this.props;

    if (loading || error) return null;

    return <WhatEverYouWant with={queryResults} />
  }
}

export default graphql(GET_QUERY)(CustomComponent);