Question

在我的应用程序中，我有一个侧边栏，其中包含＆＃34;保存的搜索列表＆＃34;以及应显示搜索结果的中心区域。每当我点击已保存的搜索链接时，我都希望使用该搜索的结果更新中心区域。

使用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 server并返回结果就好了。

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

export default graphql(VIDEO_SEARCH_QUERY)(ResultList);

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

问题是，每次重新提取似乎都会在apollo商店的ROOT_QUERY中创建一个不同的条目，而我的主要组件是＆＃34;已锁定＆＃34;进入没有变量的那个。

以下是初步获取后apollo商店的样子以及从保存的搜索中触发的其中一个回复：

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

所以我的问题是如何将主要组件切换到＆＃34;当前搜索＆＃34;或者如何在每次刷新时覆盖商店，以便只有一个键，以便主要组件正确更新。

为了完整性，我的VIDEO_SEARCH_QUERY：

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

Answer 1

也许我误解了你的用例，但似乎没有必要在这里使用reetch。保持所选搜索字符串作为状态的任何内容都会更简单，将该状态作为prop传递给主要组件，然后将该prop用作GraphQL请求中的变量。因此，graphql组件中的ResultList调用看起来像这样：

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

然后让每个保存的搜索的onClick处理程序将状态设置为搜索字符串的任何内容，Apollo将完成剩下的工作。使用Redux非常容易 - 只需触发相应的操作即可。如果您不使用Redux，则可能需要lift the state up，因此可以将其作为道具传递下来，但概念是相同的。

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

1 个答案: