使用中继搜索功能

Question

如何使用中继实现搜索功能？

所以,工作流程是

• 用户导航到search form.

初始化视图时不应该有任何查询(如在中继容器中).

• 用户填写字段值,然后按操作/搜索按钮.

中继查询被发送到服务器

• 结果从服务器收到.

页面显示它并中继将filtered结果与本地缓存进行协调.

我还没有看到ad hoc查询的示例,只是中继容器的一部分(它在组件初始化之前解析).那么,如何建模呢.它应该像突变吗？

Answer 1

如果我理解正确,那么在用户输入一些搜索文本之前,您根本不想为该组件发送任何查询,此时应该发送查询.这可以通过@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条件将变为true并且查询将被发送到服务器.