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数据以在模态（另一个组件）中显示它们。我知道所有正确的数据都在apollo缓存中，但我不知道如何从apollo获得一个todo。

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

我能以某种方式使用readFragment吗？或者我应该用id和fetchPolicy编写类似于TodosQuery的另一个查询：“cache-only”例如。

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

感谢您的任何想法。

Answer 1

我不确定如何使用graphql缓存执行此操作，但是你可以通过将选定的待办事项数据存储在反应状态并将其作为道具传递给模态组件来实现此目的。

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

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

在你的onClick函数中：

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

渲染模态组件时：

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

将数据从缓存注入到组件

1 个答案: