リレー接続の要素の詳細

Question

私はRelayとGraphqlを使用していますが、接続中の1つのオブジェクトにもっと多くのフィールドをフェッチする方法がわかりません。

我々は視聴者のタスクのリストを移入するには、次の問合せがあるとします。

viewer { 
    id 
    tasks(first:10) { 
    edges { 
     node { 
     id 
     name 
     } 
    } 
    } 
} 

ユーザーがリスト内のいずれかを選択した場合、私が選択した1の複数のフィールドを取得したいです。ここで

が私の考えです：

1. 私は「タスク」と呼ばれ、それは、入力としてIDを取り、ただ一つのタスクを返しているビューアオブジェクトに新しいフィールド/メソッドを実装します。この回答のように：https://stackoverflow.com/a/40712653/5820184
2. 欠落しているデータをフェッチするには、ノードルートクエリを使用します。 （私はリレーでこれを行う方法がわかりません。ルートコンテナを両方のクエリに依存させますか？）
3. 接続にIDの入力を受け取り、その1つのタスクだけを返します。

今は、1つの要素をグラフに取り込むために「関数」を追加することによって、「グラフ」モデル全体の考え方に反するようです。

2番は、内部リレーのように見えるので、ノードルートクエリを使用することは良い方法であるとは思えません。

リストビューに影響を与える可能性のあるリストをフィルタリングするものなので、数字3は実行可能な解決策であるかどうかわかりません。

UPDATE

我々は、入力ANがリストから1つの要素を返すようにIDを取り、各接続のためのフィールドを作ってしまいました。これは、Graphcool、GitHubなどのエンドポイントでのやり方に触発されました。正しい方向に私を指してくれてありがとう。

Answer 1

2番目の方法は、実際にofficial Relay docsに記載されています。あなたのケースでは

、あなたがこのような特定のタスクのための追加のクエリ作ることができます：

query SpecificNode { 
    node(id: "task-id") { 
    id 
    ... on Task { 
     name 
     # more fields 
    } 
    } 
} 

をGraphcoolのリレーAPIはfetch one node of a specific modelに追加のトップレベルのクエリが含まれています。あなたのケースのためのクエリは次のようになります。

query SpecificTask { 
    Task(id: "task-id") { 
    id 
    name 
    # more fields 
    } 
} 

Answer 2

あなたは@includeディレクティブの助けを借りてそれを行うことができます。リレーはすべての世話をします！

あなたが別のリアクト部品としてtaskを設計していると仮定すると、エクスポートされたリレーコンテナは次のようになります。

export default Relay.createContainer(Task, { 
    initialVariables: { 
    taskSelected: false, 
    }, 
    fragments: { 
    viewer:() => Relay.QL` 
     fragment on Viewer { 
     id 
     tasks(first:10) { 
      edges { 
      node { 
       id 
       name 
       additionalInfo @include(if: $taskSelected) { 
       where, 
       when, 
       who, 
       priority 
       } 
      } 
      } 
     } 
     } 
    `, 
    }, 
}); 

additionalInfoのフェッチがtaskSelectedリレー変数である@include(if: $taskSelected)を、使用して条件付き作られ、下に初期化されますinitialVariablesプロパティです。視聴者がより多くの情報のためのタスクを選択すると、してtrueにtaskSelectedを設定：//：リンクが死んでいると、関連情報がhttps（[リレー-API/1ノード]に移動されたよう

this.props.relay.setVariables({ taskSelected: true });