如何在没有突变的情况下从不同的组件重新获取查询？答案

【问题标题】：How to refetch a query from a different component without a mutation?如何在没有突变的情况下从不同的组件重新获取查询？
【发布时间】：2019-01-15 04:06:49
【问题描述】：

假设我有一个带有查询的组件：

   <Query query={GET_THING}>
            {({ loading, error, data, refetch }) => {
                if (loading) return <Text>Loading...</Text>;
                if (error) return <Text>Error :(</Text>;

                // currently am just storing refetch in global var
                globalRefetches.thing = refetch;
                // external component can call globalRefetches.thing()

                return <Text>{data.getThing}</Text>;
            }}
   />

然后我导航到过滤器屏幕，我可以在其中设置一些过滤器来调整结果。

这个屏幕不是前一个组件的子屏幕，所以我不能简单地通过 props 传递 refetch。
按“保存过滤器”不是突变（它不会访问服务器并更改数据库，而只是更改传递给上一个查询的局部变量），所以我没有 refetchQueries。李>

我有没有一种干净的方法来重新获取上一个屏幕上的查询？目前，我只是将它们存储在全局变量中，但我想有一些方法可以将查询从存储中拉出并使用新变量重新获取它？

【问题讨论】：

标签： react-apollo apollo-client apollostack

【解决方案1】：

有很多方法可以解决这个问题，但我认为 Apollo 的预期解决方案是使用 ApolloConsumer 组件使用新的过滤器/排序标准更新缓存。 ApolloConsumer 组件使您可以直接访问缓存。您可以直接对其进行读写。您还可以构建自己的解析器，这是模块化缓存操作（例如过滤和排序）的好方法。不幸的是，与缓存交互时有一点学习曲线，documentation 可能会更好一些。在大多数情况下，您将使用 readQuery、writeQuery、readFragment 和 WriteFragment 函数以及其他一些函数来更改缓存。

我希望这会有所帮助！

【讨论】：

不知道他们有这个功能！我觉得这就是。之前我说过，“按“保存过滤器”不是突变（它不会访问服务器并更改数据库，而只是更改传递给上一个查询的局部变量）” - 所以虽然它不是远程突变，如果我利用这个新功能，它仍然可以是本地缓存突变。本地缓存突变 => 更新查询结果。不过，这个缓存似乎不会持续存在，对吧？所以我唯一要做的就是在应用启动时加载 AsyncStorage => 本地缓存，一切顺利。谢谢！
我能够结合apollo-cache-persist 来实现它，它非常简单地满足了我的需求。我有一个<Query query={GET_FILTER}>...<Query query={GET_THING}>...</Query></Query>，其中UPDATE_FILTER_MUTATION (cache.writeData(...)) 将使用新过滤器神奇地重新渲染GET_FILTER -> GET_THING 组件。
找不到页面！

【解决方案2】：

您需要某种全局状态管理器 - 当存储中的某事物发生更改（过滤器选项）时，所有连接的组件（观察到这一点）都会更新。你可以使用 redux、mobx ......有很多简单、小巧、轻便、简单的解决方案可供选择 - 或者使用 context api 构建自己的东西。

Apollo client 支持 local state management - 不是最简单的，但类似于普通的 graphql 用法。

【讨论】：