GraphQL 查询不会在反应路由器 v4 历史推送上更新答案

【问题标题】：GraphQL query does not update on react router v4 history pushGraphQL 查询不会在反应路由器 v4 历史推送上更新
【发布时间】：2018-01-04 00:02:23
【问题描述】：

我想在我的 React Web 应用中实现一个基本的过滤选项。我有三个组件

VideoList
--------------------------

Filter    Result 
--------  ----------------
category

Filter 组件和Result 组件都是VideoList 组件的子组件。在filter 组件中，当用户单击类别时，我正在推送一个新的 url，例如 this.props.history.push(/videos/${category.name})。看来我的react-router 设置工作正常，VideoList 组件获取新类别名称并成功将其传递给Result 组件。

<Route exact path="/videos" component={VideoList}/>,
<Route exact path="/videos/:category" render={props => <VideoList {...props} />} />,

在VideoLIst 组件中

<Result category={category} />

Result 组件在其自己的 GraphQL 查询中使用新的类别名称，如下所示：

export default compose(
  graphql(VIDEOS_QUERY, {
    options: props => { 
      return {
        variables: {
          filterByCategory: props.category ? props.category : null,      
        }
      };
    },
...

但是，在Result 组件中第一次推送新网址props.data.VideoQuery（这是来自graphql 服务器的返回值）时，由于一些我不知道的原因，undefined 得到了undefined。但是，当用户第二次点击category 时，Result 组件会正确呈现。

【问题讨论】：

标签： reactjs graphql react-router-v4 react-apollo

【解决方案1】：

使用以下代码更新您的 apollo 客户端的集成部分。

const client = new ApolloClient({
  cache,
  link: newLink,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "network-only",
    },
    query: {
      fetchPolicy: "network-only",
    },
  },
});

【讨论】：

【解决方案2】：

您是否尝试过使用Switch 而不是带有exact 的路由？

<Switch>
  <Route path="/videos" component={VideoList} />
  <Route path="/videos/:category" render={props => <VideoList {...props} />} />
</Switch>

【讨论】：