javascript - 使用 RelayJS 中的数据通过 React JS 过滤名称列表，而不调用 GraphQL

Question

我想知道是否可以过滤从 Relay 和 graphql-java 服务器收到的名称列表，而无需进行调用，无需对 GrpahQL 模式进行任何更改，并且仅使用 ReactJS 来实现此目的。
---MobX 作为状态管理库可以是一个决定，但我应该首先存储所有 Relay 结果。

Answer 1

买者自负:我对 Relay 也是新手，并且正在努力解决这些相同的概念。但是，鉴于关于 Relay 的可访问信息相对缺乏，我认为尝试在这里布局关键概念会有所帮助。我的理解可能是错误的，所以如果有人发现我的代码/推理中的错误能够评论/编辑，我会很高兴。

过滤也花了我一段时间才“点击”。这取决于您保存用于过滤的数据的位置，但我们假设 name 字段位于您的 Users Type 上，并且查询如下所示:

viewer {
  allUsers {
    edges {
      node {
        name
      }
    }
  }
}

假设您的顶级 NameList 组件如下所示:

class NameList extends Component {
  render() {
    return (
      <div>
        {this.props.users.edges
          .map(u => {
            <NameItem name={u.node} />
           })
         }
      </div>
    )
  }
}

Relay.createContainer(NameList, {
  initialVariables: { first: 10 },
  fragments: {
    users: () => Relay.QL`
    fragment on Viewer {
      allUsers(first: $first) {
         edges {
           node {
             ${NameItem.getFragment('user')}
           }
          }
        }
      }
    ` 
  }
})

您的 NameItem 设置很简单:

class NameItem extends Component {
      render() {
        return (
          <div>
            Name: {this.props.user.name}
          </div>
        )
      }
    }

Relay.createContainer(NameItem, {
  initialVariables: {},
  fragments: {
    user: () => Relay.QL`
    fragment on User {
      name
      }
    ` 
  }
})

考虑这里的通用模式:

列表组件

List 组件在查询中的顶级 Type 上获取一个片段 - 在本例中为 Viewer，来自 中继容器.

List 还在用户类型 级别代表其Item 子项插入一个fragment。

换句话说，它捕获了一个应该传递给 Item 组件的 User 对象数组。

如果这不是 Relay，而是 Redux，则该组件可能只是将 state.users 传递给 Item 组件。您可以这样做，因为在某个时候，您已经从自己的后端手动提取了所有 User 并将它们加载到 Redux 中。但由于 Relay 为您进行了艰苦的思考，因此它需要比 Redux 多一点点的信息。

项目组件

这更简单。它需要一个 User 类型的实体并呈现 name。除了语法之外，这里的功能与 Redux 设置中的类似组件没有太大区别。

确实如此，如果没有复杂的Relay，您所拥有的只是要渲染的一组项目。在普通的 React 中，您只需在调用 render() 中的 .map() 之前(或期间)过滤数组即可。

但是，使用Relay，传递给child的fragment对于parent来说是不透明的——即，List正在向Item传递盲包，因此它无法根据fragment<来决定是否传递下去 的内容。

这个人为示例中的解决方案非常简单:只需剥离 parent 和 child 级别的 name 字段即可。请记住:Relay 是让组件告诉 GraphQL 它们需要什么数据。您的 List 组件需要它想要过滤的任何字段——不多也不少。

如果我们修改上面的List容器:

...
users: () => Relay.QL`
    fragment on Viewer {
      allUsers(first: $first) {
         edges {
           node {
             name
             ${NameItem.getFragment('user')}
           }
          }
        }
      }
    ` 

然后我们更新我们的 render 函数:

 <div>
        {this.props.users.edges
          .map(u => {
             if (u.node.name == "Harvey") {
               <NameItem name={u.node} />
             }
           })
         }
 </div>

然后我们就实现了基本的过滤，而不需要 mobx、更多的服务器访问等。