캐시에서 구성 요소로 데이터를 입력하십시오.

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 데이터를 모달 (다른 구성 요소)로 표시 할 수있는 방법에 대한 질문이 있습니다. 모든 적절한 데이터가 아폴로 캐시에 있음을 알고 있지만 아폴로에서 수행 할 수있는 방법을 모르겠습니다.

@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 캐시를 사용하는 방법을 잘 모르겠지만 선택한 토도 데이터를 반응 상태로 저장하고이를 모달 구성 요소로 전달하여이를 달성 할 수 있습니다.

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

:

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

가 모달 구성 요소를 렌더링 : 당신의 onclick 기능에서

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

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