Question

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

所以，工作流程是

用户导航至search form。

初始化视图时不应该有任何查询（如在中继容器中）。

用户填写字段值，然后按操作/搜索按钮。

将中继查询发送到服务器

从服务器收到结果。

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

我没有看过ad hoc查询的例子，只是中继容器的一部分（它在组件初始化之前解析）。那么，如何建模呢。它应该像一个突变吗？

Answer 1

如果我理解正确，您希望在用户输入一些搜索文本之前根本不发送任何查询，此时应发送查询。这可以通过@Xuorig发布的示例来完成，还有一个补充：使用GraphQL＆＃39; s @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，查询将被发送到服务器。

Answer 2

这是我在项目中实施简单搜索的方式：

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更新initialVariables，并且relay将查询新数据。

使用中继搜索功能

2 个答案: