キャッシュからコンポーネントにデータを挿入

Question

私は反応とアポロプロジェクトに取り組んでいます。私は次のような状況があります。

@graphql(TodosQuery) 
class Table extends Component { 
    render(){ 
    return (
     <div> 
     {this.props.data.todos.map(...)} 
     </div> 
    ) 
    } 
} 

const TodosQuery = gql` 
    query TodosQuery { 
    todos { 
     id 
     name 
     deadline 
    } 
    } 
` 

私のアプリでは、詳細情報を含むそれぞれのToDoについてモーダルを開くことができます。そして、今私はどのように私はモーダル（別のコンポーネント）でそれらを表示するキャッシュからデータを取得することができます質問があります。私はすべての適切なデータがアポロキャッシュにあることを知っていますが、私はアポロから1つのトドゥを取得する方法はわかりません。

@graphql(...) 
class Modal extends Component { 
    ... 
} 

何らかの理由でreadFragmentを使用できますか？または、idとfetchPolicyを持つTodosQueryに似た別のクエリを書くべきですか？ "cache-only" eg。

const TodosQuery = gql` 
    query TodosQuery($id: String!) { 
    todos(id: $id) { 
     id 
     name 
     deadline 
    } 
    } 
` 

ありがとうございました。

Answer 1

私はgraphqlキャッシュでこれを行う方法はわかりませんが、mabyでは、選択したtodoデータを反応状態に保存し、それを小道具としてモーダルコンポーネントに渡すことでこれを実現できます。

あなたのonClick機能で

class Table extends Component { 
    consctructor(props) { 
     super(props); 
     this.state = { selectedTodo: {} } 
    } 

    render(){ 
     return (
      <div> 
       {this.props.data.todos.map(...)} 
      </div> 
     ); 
    } 
} 

：

this.setState({ 
    selectedTodo: this.props.data.todos.find(todo => todo.id === id) 
}); 

モーダル・コンポーネントをレンダリング：

<Modal todoData={this.state.selectedTodo} />