Question

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

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

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

Filter组件和Result组件都是VideoList组件的子组件。在filter组件中，当用户点击该类别时，我正在推送一个新网址，例如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,      
        }
      };
    },
...

但是，据我所知，第一次推送新网址的原因props.data.VideoQuery（这是来自graphql server的返回值）Result组件获取undefined。但是，当用户第二次点击category时，Result组件会正确呈现。

Answer 1

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

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

Answer 2

您是否尝试过使用Switch代替路由exact？

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

GraphQL查询不会在react router v4 history push

2 个答案: