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);

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

问题是每次重新获取似乎都会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}
`;
4

1 回答 1

1

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

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

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

于 2017-10-24T00:30:34.357 回答