хранение данных в состоянии, когда данные выбираются с использованием GraphQl и Apollo Client - PullRequest
Новая
       17

хранение данных в состоянии, когда данные выбираются с использованием GraphQl и Apollo Client

0 голосов
/ 26 мая 2019

Я использую реаги и редукцию, и каждый раз, когда я вызываю какой-то API остальных в ComponentDidMount, я могу установить с ним состояние и передать это состояние моему ребенку или изменить это состояние и поиграть с ним.Я тоже могу хранить эти данные в моем редуксе и делать все, что хочу.Я недавно начал использовать graphql и вижу, что когда кто-то извлекает данные из рендера с использованием запроса, мы рендерим данные, которые нам нужны, и так далее.Но меня беспокоит то, как вместо того, чтобы рендерить, я могу сохранить его в каком-то состоянии, поиграть с ним, а затем передать его ребенку.Я пришел через это состояние ссылки в Apollo, но не мог иметь четкое понимание этого, как то, что он в основном делает?Как решить эту проблему управления состоянием и играть с тем состоянием, которое задают данные, поступающие от Аполлона.Я действительно пропускаю эту функцию 

this.setState({
  data:(some api data )
)}

1 Ответ

0 голосов
/ 26 мая 2019

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

1-й метод

Данные, считанные из API, доступны через кеш - политика по умолчанию - это кеш в первую очередь.Каждый из дочерних элементов может получить доступ к данным из кэша, используя graphql (HOC или компоненты).Каждый из них может использовать свой запрос для получения данных, которые действительно нужны компоненту.Если все поля запросов являются подмножеством родительского запроса - вы можете использовать политику только для кэша.

2-й метод

Вы можете манипулировать данными API с помощью getDerivedStateFromProps().Вы можете передать эти значения напрямую в качестве подпорки дочерним элементам (без использования доступа к кэшу graphql).

3-й метод

Реагировать на классику (передавать подпорки вниз по дереву): просто передать dataреквизит (неизмененный) для дочернего рендеринга <Child data={this.props.data} /> (родитель внутри HOC) или <Child data={data} /> (рендеринг проп в компоненте <Query/>)

...