首页 文章

apollo react:切换查询参数的正确方法

提问于
浏览
0

在我的应用程序中,我有一个侧栏,其中包含“已保存搜索”列表以及应显示搜索结果的中心区域 . 每当我点击保存的搜索链接时,我想用该搜索的结果更新中心区域 .

使用apollo-react做到这一点的正确方法是什么?

我试过这个:

// SidebarConnector.js:
const withVideoSearch = graphql(
  VIDEO_SEARCH_QUERY,
  {
    name: 'videoSearchQuery',
    props: ({ videoSearchQuery }) => {
      return ({
        searchVideos: videoSearchQuery.refetch,
      });
    },
  }
);
export default withVideoSearch(Sidebar);

我保存的搜索正在点击 searchVideos({ query: "some query" }) ,根据上面的内容,正在使用不同的变量对 VIDEO_SEARCH_QUERY 查询进行重新获取 . 这工作正常,调用graphql服务器,结果返回正常 .

对于显示我使用的结果列表的主要组件:

export default graphql(VIDEO_SEARCH_QUERY)(ResultList);

最初,主要组件从服务器获取结果,好像查询是在没有变量的情况下完成的,这很好,完全是我想要的 .

问题是每次重新提取似乎在apollo的商店 ROOT_QUERY 中创建了一个不同的条目,而我的主要组件是"locked"到没有变量的那个 .

这是初始获取后apollo商店的样子,以及从保存的搜索触发的其中一个反映:

ROOT_QUERY
  searchVideos({"query":"coke"}): [Video]
    0:▾Video:arLaecAu5ns
  searchVideos({"query":null}): [Video]
    0:▾Video:3HXg-oVMA0c

所以我的问题是如何将主要组件切换到“当前搜索”或如何在每次刷新时覆盖存储,以便只有一个键,以便主组件正确更新 .

为了完整性,这是我的 VIDEO_SEARCH_QUERY

export const VIDEO_SEARCH_QUERY = gql`
  query searchVideos($query: String) {
    searchVideos(query: $query) {
      ...fVideo
    }
  }
  ${fVideo}
`;

1 回答

  • 1

    也许我'm misunderstanding your use case, but it seems like there'不需要在这里使用refetch . 保持所选搜索字符串作为状态的任何内容都会更简单,将该状态作为prop传递给主要组件,然后将该prop用作GraphQL请求中的变量 . 所以 ResultList 组件中的 graphql 调用看起来像这样:

    const options = props => ({ variables: { query: props.searchString } })
    export default graphql(VIDEO_SEARCH_QUERY, { options })(ResultList);
    

    然后只需将每个已保存搜索的onClick处理程序设置为搜索字符串的状态,Apollo将完成剩下的工作 . 使用Redux非常容易 - 只需触发相应的操作即可 . 如果你没有使用Redux,你可能必须lift the state up所以它可以作为道具传递下去,但概念是相同的 .

相关问题