升级setVariables

如何迁移示例 this.props.setVariables 从旧的API调用。

this.props.setVariables 旧的API没有直接相同的新API。 这个变化的一个重要原因是新的内核不再追踪如何从查询中提取任何特定的子树。这使得新内核更快，但需要明确的查询来获取新数据。看看这四种不同的情况：

initialVariables #

如果组件不实际使用 setVariables(), 就使用 initialVariables JS 和 GraphQL 之间共享值, 则有两种备选方法：

• 内联GraphQL查询中的值，可能使用GraphQL注释(即 # PAGE_SIZE)进行注释。
• 将变量添加到使用该片段的查询，并在获取查询时将其传递。为此，将产品的变量集合到一个模块中是非常有用的。

分页 #

典型 Relay Classic 代码:

// counterexample
this.props.relay.setVariables({
  count: count + 10,
});

initialVariables: {
  count: 10,
},

fragment on User {
  friends(first: $count) {
    # ...
  }
}

这应该升级到使用 PaginationContainer.

更改参数 #

典型的旧代码:

// counterexample
this.props.relay.setVariables({
  search: newSearchTerm,
});

initialVariables: {
  search: '',
}

fragment on User {
  friends(named: $search, first: 10) {
    # ...
  }
}

这可以通过使用 RefetchContainer 来进行升级，它允许您指定要使用的查询来获取新数据。

展示更多 #

典型的旧代码：

// counterexample
this.props.relay.setVariables({
  showComments: true,
});

initialVariables: {
  showComments: false,
}

fragment on FeedbackTarget {
  comments(first: 10) @include(if: $showComments) {
    # ...
  }
}

这可以通过有条件地渲染 QueryRenderer 一次渲染后的数据进行升级。新API的代码开销大大降低。

或者RefetchContainer 也可以使用。