Какой способ использования хранилища apollo рекомендуется, читать фрагмент / запрос чтения или соединительный запрос, используя graphql hoc в компоненте или передавая реквизиты?

Question

Мы используем react-apollo, и это graphql HOC в нашем проекте. Кроме того, мы используем PureComponent из react, чтобы гарантировать, что при каждом повторном рендеринге родительского элемента он не вызывает повторного рендеринга дочернего компонента, если дочерний props не изменился. А для чтения и записи в apollo cache мы используем apollo client.

graphql HOC подключен к компоненту для извлечения данных с сервера, и он будет хранить данные в кэше. И мы хотим предоставить некоторую часть этих данных компоненту-потомку из кэша.

Давайте рассмотрим пример. На уровне предка мы получаем список элементов с сервера. И на уровне ребенка, нам нужна деталь конкретного предмета, который уже есть в магазине apollo.

Для того же, есть три возможных способа:

1. Передача данных в качестве реквизита дочерним компонентам.

• Вот метод рендеринга Grand Parent Component, где мы получаем список элементов с сервера.

render(){
  return (
    <ListComponent list={this.props.list}/>
  )
}

• Вот метод визуализации компонента List.

render(){
  return (
    <ItemComponent list={this.props.list} selectedItem={"1"}/>
  )
}

• Вот метод визуализации компонента Item.

render(){
  const item = this.props.list[this.props.selectedItem]
  return (
    <div>{this.props.item}</div>
  )
}

2. Чтобы подключить graphql HOC внутри дочернего компонента с fetch-policy, установленным в cache-first.

• Вот компонент, куда мы зацепляем graphql query, чтобы получить предмет.

class ItemComponent extends React.PureComponent {
 render(){
  return (
     <div>{this.props.item}</div>
  )
 }
}
export default compose(
 graphql(QUERY, {
 options: ({id}) => ({
    variables: {id}
  })
 }
)

3. Для использования функции apollo client readFragment.

render(){
  const item = client.readFragment({
    id:`List:${this.props.selectedItem}`
    fragment:"ListFragment"
  });

  return (
    <div>{this.props.item}</div>
  )
}

Также есть три плюса и минуса с этими тремя подходами.

1. Первый подход работает хорошо во всех случаях. Единственная проблема - мы передаем данные сверху вниз через ненужные реквизиты.

2. Второй подход работает хорошо во всех случаях. Единственная проблема заключается в том, что мы должны излишне перехватить запрос для доступа к кешу.

3. Третий подход выглядит чистым, но единственная проблема заключается в том, что компонент не перерисовывается при обновлении apollo cache, потому что мы используем PureComponent.

Я запутался между этими тремя подходами. Поэтому, если вы можете дать представление о том, какой подход мне следует использовать, или если вы можете предоставить какой-либо другой гибридный подход, это было бы очень полезно.