代码之家 › 专栏 › 技术社区 › atkayla

如何从不同的组件中重新提取查询而不进行任何更改?

apollostack apollo-client react-apollo

0

atkayla · 技术社区 · 7 年前

假设我有一个带有查询的组件来获取某些内容:

   <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>;
            }}
   />

然后我导航到一个过滤器屏幕,在那里我可以设置一些过滤器来调整结果。

此屏幕不是前一个组件的子屏幕,因此我不能简单地通过道具传递refetch。
按“Save Filters”并不是一个变异(它不会命中服务器并更改数据库,而是简单地更改传递给上一个查询的本地变量),所以我没有refetchquery。

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

2 回复 | 直到 7 年前

1

Cory McAboy 7 年前

有很多方法可以解决这个问题,但是我认为Apollo的目的是使用ApolloConsumer组件用新的过滤/排序标准更新缓存。ApolloConsumer组件允许您直接访问缓存。你可以直接读写。您还可以构建自己的解析器,这是模块化缓存操作(如筛选和排序)的一种好方法。不幸的是,当与缓存和 documentation 可能会好一点。在大多数情况下,您将使用readQuery、writeQuery、readFragment和WriteFragment函数以及其他一些函数来更改缓存。

我希望这有帮助!

2

0

xadm 7 年前

您需要某种全局状态管理器-当存储中的某个内容发生更改(筛选选项)时,所有连接的组件(注意这一点)都将更新。你可以用redux,mobx。。。有很多简单、小巧、轻巧、容易选择的解决方案,或者使用上下文api构建自己的解决方案。

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