Reactjs 从Apollo.js中的查询中排除店内数据

我目前正在一个项目中介绍Apollo，我对缓存/gql组件的组合有一些疑问

我将用一个例子来解释：假设我们有一个

组件“hoced”，其中gql查询定义了它的数据需求，这是一个相当长的列表。此组件没有

，因为它不打算单独使用-必须使用

在其他组件中呈现。然后我有两个应用程序，使用这个组件：

和

。当

呈现

时，后者只下载数据，一切正常<代码>但是，已包含

使用的部分数据。我想

找出这个问题，只下载缺少的数据，而不是它的查询中定义的整个数据集。这里的业务逻辑是检查阿波罗商店中已有的内容，并从

的查询中删除这些字段

查询的形式如下：

 query WidgetQuery {
   someType {
     id
     a
     b
     c
     d
   }
 }

 query ComplexAppQuery {
   someType {
     b
     c
   }
 }

所以当

在

内时，我不希望它下载“a”和“d”，但在其他情况下是的

---

有什么方法可以实现这一点吗，自定义解析器是正确的方法吗？

您可以使用

@skip

和

@include

指令来实现这一点，指令基于从其父组件

或

传递的

组件的属性。让我们调用prop

all

：

<SimpleApp>
  <Widget all={true}/>
</SimpleApp>
<ComplexApp>
  <Widget all={false}>
</ComplexApp>

a

和

d

仅当传递的

$all

变量为

true

时才包括在内

在Apollo中，您可以通过向查询的

选项

传递一个带有一个参数的函数，将道具传递给变量：

const widgetQuery = gql`
  query widgetQuery($all: Boolean!) {
    someType {
      id
      a @include(if: $all)
      b
      c
      d @include(if: $all)      
    }
  }
`

const WidgetWithQuery = graphql(widgetQuery, {
  options: (ownProps) => ({
    variables: {
      all: ownProps.all
    }
  })
})(Widget)

现在，Apollo客户端确保基于

id

为给定节点组合从

SimpleApp

和

ComplexApp

获取的所有字段

---

有关

@skip

和

@include

的更多信息，请检查

@skip

和

@include

指令，该指令基于从其父组件

或

传递的

组件的属性。让我们调用prop
all
：

<SimpleApp>
  <Widget all={true}/>
</SimpleApp>
<ComplexApp>
  <Widget all={false}>
</ComplexApp>

a
和
d
仅当传递的
$all
变量为
true
时才包括在内

在Apollo中，您可以通过向查询的
选项
传递一个带有一个参数的函数，将道具传递给变量：

const widgetQuery = gql`
  query widgetQuery($all: Boolean!) {
    someType {
      id
      a @include(if: $all)
      b
      c
      d @include(if: $all)      
    }
  }
`

const WidgetWithQuery = graphql(widgetQuery, {
  options: (ownProps) => ({
    variables: {
      all: ownProps.all
    }
  })
})(Widget)

现在，Apollo客户端确保基于
id
为给定节点组合从
SimpleApp
和
ComplexApp
获取的所有字段

有关
@skip
和
@include
的更多信息，起初这似乎是一个很好的解决方案，但经过再三考虑后，如果我使用
all=false
运行查询（因此当我知道
a
和
b
已经在商店中时）我仍然无法在
-Apollo不会将指令排除的字段传递给组件。不幸的是，在这种情况下，这是没有用的。此外，仍然需要手动检查
a
和
b
是否在存储中，不幸的是，在构建时很少有必要知道这一点。目前我看到的唯一解决方案是使用
read（Query | Fragment）
向：a添加一些代理元素。检查存储中是否存在数据，并设置/取消设置
all
变量；b） 。如果只发送部分查询（因此
all=false
），则从存储中读取从查询中排除的字段，并将其附加到Apollo的
数据中。我担心这个解决方案会非常慢，但是必须检查它……或者只是将查询分成两个查询。最简单的解决方案，但缺乏通用性，使代码更难阅读，依赖于批处理（
依赖于两个查询，因此在渲染时都必须触发），一次触发多个redux操作。。。也不是很好。起初这似乎是一个很好的解决方案，但经过再三考虑后，如果我使用
all=false
运行查询，它就无法正常工作了（因此当我知道
a
和
b
已经在商店中时）我仍然无法在
-Apollo不会将指令排除的字段传递给组件。不幸的是，在这种情况下，这是没有用的。此外，仍然需要手动检查
a
和
b
是否在存储中，不幸的是，在构建时很少有必要知道这一点。目前我看到的唯一解决方案是使用
read（Query | Fragment）
向：a添加一些代理元素。检查存储中是否存在数据，并设置/取消设置
all
变量；b） 。如果只发送部分查询（因此
all=false
），则从存储中读取从查询中排除的字段，并将其附加到Apollo的
数据中。我担心这个解决方案会非常慢，但是必须检查它……或者只是将查询分成两个查询。最简单的解决方案，但缺乏通用性，使代码更难阅读，依赖于批处理（
依赖于两个查询，因此在渲染时都必须触发），一次触发多个redux操作。。。也不是很好。