阿波罗反应：切换查询参数的正确方法

Posted 2023-03-10

【中文标题】阿波罗反应：切换查询参数的正确方法

【英文标题】：apollo react: proper way to switch a query's params

【发布时间】：2018-04-04 06:36:07

【问题描述】：

在我的应用程序中，我有一个带有“已保存搜索”列表的侧边栏和一个应该显示搜索结果的中心区域。每当我点击已保存的搜索链接时，我都想用该搜索的结果更新中心区域。

使用 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 中创建一个不同的条目，而我的主要组件被“锁定”在没有变量的那个中。

这是 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】：

也许我误解了您的用例，但似乎没有必要在这里使用 refetch。将选择的搜索字符串作为状态持久化会更简单，将该状态作为道具传递给您的主要组件，然后将该道具用作 GraphQL 请求中的变量。因此，graphql 组件内的 graphql 调用看起来像这样：

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

然后，只需让每个保存的搜索的 onClick 处理程序将状态设置为该搜索字符串的状态，然后 Apollo 将完成剩下的工作。使用 Redux 非常简单——只需触发适当的操作。如果你不使用 Redux，你可能需要 lift the state up 以便它可以作为道具传递下来，但概念是一样的。

【讨论】：

Doh...谢谢！证明一个人应该不时休息一下。