Как получить обновленные данные из кэша Apollo - PullRequest
Новая
       12

Как получить обновленные данные из кэша Apollo

0 голосов
/ 15 мая 2018

Есть ли у клиента Apollo что-то вроде mapStateToProps (Redux)?

скажем, у меня есть компонент, после запроса я знаю, что в кеше есть данные, поэтому я делаю что-то вроде: 

    class Container extends React.Component {
      ...
      ...
      render() {
        const notes = this.props.client.readFragment(NOTES_FRAGMENT)
        // notes has everything I need
        return (<Child notes={notes} />);
      }

    }
    export default WithApollo(Container);

Однако, когда у меня есть одноуровневый компонент, который вызывает мутацию и выполняет обновление, реквизиты компонента <Child /> никогда не получают обновлений. 

class AnotherContainer extends React.Component {
   render() {
     return(
       <Mutation
          mutation={UPDATE_NOTE}
          update={(cache, {data: {updateNote}}) =? {
            const list = cache.readFragment({
              fragment: NOTES_FRAGMENT
            })
            // manipulate list
            cache.writeFragment({fragment:NOTES_FRAGMENT, data })
          }
        }
     )
   }
}

поэтому мой вопрос, как мне обновить реквизиты компонента <Child /> всякий раз, когда я делаю writeFragment? Есть ли что-то вроде mapStateToProps для «подключения» реквизита notes к кешу, поэтому, когда он обновляется, запускается жизненный цикл React?

1 Ответ

0 голосов
/ 15 мая 2018

react-apollo предоставляет три способа прослушивания изменений в кэше: 1) компонент запроса , 2) graphql HOC и 3) прямой вызов watchQuery используя клиента. Во всех трех случаях вы предоставляете какой-либо запрос и любые соответствующие параметры, и вы получаете способ первоначально получить этот запрос, а также прослушать его обновления.

Ключевым моментом здесь является то, что запросов , а не фрагментов являются предназначенными средствами для чтения кэша. Метод readFragment предназначен только для удобного способа считывания кэша один раз (обычно в контексте изменения кэша после мутации) и не обеспечивает какой-либо реактивности.

Итак, нижняя строка, оберните ваши компоненты либо в компонент Query, либо в graphql HOC, и вы получите доступ к реквизитам, которые отражают результаты запроса в кеше, и которые будут обновляться при обновлении кеша (то же самое). способ connect ред компонентов).

В этот момент в вашей голове может происходить пара вещей:

«Но мне не нужно делать еще один запрос к серверу!» Не беспокойтесь - по умолчанию Apollo запрашивает один и тот же запрос только один раз и использует кэш для всех последующих вызовов. Вы можете изменить это поведение, установив соответствующую политику извлечения для вашего запроса. Это включает в себя политику cache-only, которая будет извлекать данные только из кэша (хотя для большинства случаев достаточно политики по умолчанию cache-first).

«Но у меня нет запроса для работы!» Если вы пишете в кеш как средство сохранения некоторого произвольного состояния на стороне клиента, то вам следует использовать apollo-link-state для этого.

«Но мне не нужен весь результат запроса, только его часть!» В graphql HOC предусмотрена функция props, которую вы можете передать в конфигурацию, которая позволит вам преобразовать данные вашего запроса в любую форму, с которой вы хотите работать. Та же функциональность на самом деле не нужна при использовании шаблона рендеринга реквизита с компонентом Query - вы можете просто напрямую манипулировать реквизитом рендеринга. В любом случае, было бы неплохо написать некоторые редукторы, которые вы можете использовать повторно в своем проекте, которые просто принимают возвращенные данные и преобразуют их в нужную вам форму. В последнем большом проекте, над которым я работал, была только та сторона клиента, и с ней все было намного проще.

...