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

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

  •  0
  • atkayla  · 技术社区  · 6 年前

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

       <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 回复  |  直到 6 年前
        1
  •  1
  •   Cory McAboy    6 年前

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

    我希望这有帮助!

        2
  •  0
  •   xadm    6 年前

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

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