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

Question

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

   <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 传递重新获取。
按 "Save Filters" 不是突变（它不会访问服务器并更改数据库，而只是更改传递给上一个查询的局部变量），所以我没有 refetchQueries .

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

Answer 1

你需要某种全局状态管理器——当存储中的某物发生变化时（过滤器选项），所有连接的组件（观察这个）都会更新。您可以使用 redux、mobx ...有很多简单、小巧、轻便、容易的解决方案可供选择 - 或者根据上下文 api.

自己构建

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

Answer 2

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

希望对您有所帮助！

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

How to refetch a query from a different component without a mutation?

apollostack

react-apollo

apollo-client