GrpahQLを呼び出さずにRelayJSのデータを使ってReactJSをフィルタリングする

Question

Relayやgraphql-javaサーバから受信した名前のリストをフィルタリングすることができますか？私のGrpahQLスキーマの変更はこの目的のためにReactJSのみを使用しています。
--- MobXは状態管理ライブラリとして決定できますが、まずすべてのリレー結果を保存する必要があります。

Answer 1

警告の買い手：私はこれらの同じ概念に苦労Relayで新しめだとしても&。しかし、Relayのアクセス可能な情報が不足しているため、ここで重要な概念を試してレイアウトすることが役立つと思いました。私の理解は間違っている可能性があるので、私のコード/推論で間違いを見つけた人が誰でもコメント/編集するなら、私はそれを愛するでしょう。

フィルタリングには、「クリック」するまでにしばらく時間がかかりました。それはあなたがフィルターに使用しますデータを保持する場所によって異なりますが、さんがあなたのUsers Type上nameフィールドの生活を想定してみましょう、とクエリは、このようなものです：

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 
     } 
    ` 
    } 
}) 

がgeneralizabを考えてみましょう。このように見えましたここルパターン：Listコンポーネントは、クエリのトップレベルTypeで断片をとる

リストコンポーネント - この場合、Viewerで、Relay containerから。

Listは、User Typeレベルの子Itemの代わりにfragmentを挿入します。

つまり、Userオブジェクトの配列をキャプチャし、それはItemコンポーネントに渡されます。

これはRedux、たとえば、Relayなかったし、その代わりだった場合、このコンポーネントは、単にItemコンポーネントにstate.usersを渡すかもしれません。ある時点で、自分のバックエンドから手動でUserをすべて抽出し、Reduxにロードしたので、これを行うことができます。しかし、Relayはあなたのために難しい考えをしているので、それはReduxよりも十分多くの情報を必要とします。

項目コンポーネント

これは、より簡単です。タイプUserのエンティティがあり、nameをレンダリングします。構文の他に、ここの機能は、Reduxセットアップの類似のコンポーネントとほとんど変わりません。

実際にのように、Relayの複雑さがなくても、レンダリングしているアイテムの配列だけがあります。バニラReactでは、.map()に電話する前に（またはその間に）アレイをフィルタリングしてrender()にするだけです。 childに渡さfragmentがparent --ieに不透明である

しかし、Relayと、ListはItemにブラインドパッケージを手渡しているので、それに合格するか否かの判断を下すことができませんこれは、fragmentのコンテンツに基づいています。

nameフィールドは、parentとchildのレベルでちょうど剥がしただけで簡単に解決できます。覚えておいてください：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を必要とせずに複数のサーバーの旅行などを基本的なフィルタリングを達成しました