如何从其他组件重新获取查询而不会发生突变?

时间:2018-08-08 01:27:45

标签: react-apollo apollo-client apollostack

说我有一些组件可以获取某些内容:

   <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。
  • li>

我是否可以通过一种干净的方法来重新获得前一个屏幕上的查询?目前,我只是将它们存储在全局变量中,但是我想可以通过某种方式将查询从存储中拉出并使用新变量进行重新提取?

2 个答案:

答案 0 :(得分:1)

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

我希望这会有所帮助!

答案 1 :(得分:0)

您需要某种全局状态管理器-当商店中的某项更改(过滤器选项)时,所有连接的组件(观察到此情况)都会更新。您可以使用redux,mobx ...有很多简单,小巧,轻便,简单的解决方案可供选择-或使用上下文api构建自己的解决方案。

Apollo client支持local state management-不是最简单的支持,但与普通的graphql使用类似。