如何使用中继实现搜索功能？
所以，工作流程是
search form。初始化视图时不应有任何查询（如在中继容器中）。
一个中继查询被发送到服务器
页面显示它，relay 将filtered 结果与本地缓存相协调。
我还没有看到 ad hoc 查询的示例，而只是中继容器的一部分（它在组件初始化之前解析）。那么，如何建模呢。应该是突变吧？
【问题讨论】：
标签： relayjs
如果我理解正确，您不希望在用户输入一些搜索文本之前不为组件发送任何查询，此时应该发送查询。这可以通过 @Xuorig 发布的示例来完成，并添加一个：使用 GraphQL 的 @include 指令跳过片段，直到设置变量。这是扩展示例：
export default Relay.createContainer(Search, {
initialVariables: {
count: 3,
query: null,
hasQuery: false, // `@include(if: ...)` takes a boolean
},
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
# add `@include` to skip the fragment unless $query/$hasQuery are set
items(first: $count, query: $query) @include(if: $hasQuery) {
edges {
node {
...
}
}
}
}
`,
},
});
最初将跳过此查询，因为包含条件是虚假的。然后，当文本输入发生变化时，组件可以调用setVariables({query: someQueryText, hasQuery: true})，此时@include条件为真，查询将被发送到服务器。
【讨论】：
if 一起使用，这会导致错误Argument "if" expected type "Boolean!" but got: "sdsd". irst:9) @include(if:"sdsd")。像search(query: $query, first: $first) @include(if: !!$query) 一样尝试过，但Unexpected ! 也出错了。所以，我最终使用另一个布尔标志来指示 $query 是否为空。有没有办法避免额外的变量？
@include(if: ...) 只接受布尔值，所以如果 $query 是一个字符串，你需要另一个变量。我会更新答案。
fetchWithRetries(): Still no successful response after 1 retries, giving up. 错误。当hasQuery最初设置为true时，它工作正常。
这是我在项目中实现简单搜索的方式：
export default Relay.createContainer(Search, {
initialVariables: {
count: 3,
title: null,
category: null,
},
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
items(first: $count, title: $title, category: $category) {
edges {
node {
...
}
}
}
}
`,
},
});
您的搜索表单只需使用 this.props.relay.setVariables 更新初始变量，然后中继将查询新数据。
【讨论】：