Реагировать на локальное состояние Apollo init дважды - PullRequest
Новая
       92

Реагировать на локальное состояние Apollo init дважды

0 голосов
/ 13 июля 2020

Итак, я думаю, что это ошибка в React Apollo при использовании локального состояния, но, возможно, я неправильно инициализирую состояние по умолчанию.

Предполагаемый результат: Значения локальное состояние должно быть установлено при загрузке страницы, а затем изменено на новые значения с запускающимися событиями. Например, у меня есть компонент ReactPlayer, который запускает событие готовности при загрузке видео.

Фактический результат: Начальные значения установлены правильно, затем как только событие готовности запускается из ReactPlayer компонент значения в состоянии обновляются правильно. Однако затем они сбрасываются прямо обратно к начальным значениям загрузки страницы.

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

Как воспроизвести проблему: Компонент проигрывателя 

 console.log('Duration is' + duration);
<ReactPlayer
        key={id}
        controls={false}
        onReady={ () => updatePlayer('ready', true) }
        className={styles.player}
        ref={ref => (mediaPlayer = ref)}
        width="100%"
        height="100%"
        playing={playing}
        onPlay={ () => updatePlayer('playing', true) }
        onPause={ () => updatePlayer('playing', false) }
        onDuration={ (duration) => updatePlayer('duration', duration) }
        onProgress={ ({playedSeconds}) => updatePlayer('playedSeconds', playedSeconds) }
        url={ getVideoUrl(media) }
        muted={muted}
      />

Конфигурация Apollo 

const cache = new InMemoryCache();

const typeDefs = gql`
    type Player {
        playing: Boolean!,
        muted: Boolean!,
        duration: Float!,
        playedSeconds: Float!,
        ready: Boolean!
    }
`};

const initialState = {
player: {
    playing: false,
    muted: true,
    duration: 5,
    playedSeconds: 0,
    ready: false,
    __typename: 'Player'
  }
};

cache.writeData({data: initialState});

const client = new ApolloClient({
  link:  authLink.concat(link),
  cache,
  typeDefs
});

export default client;

export const updatePlayer = (key, value) => {
  console.log('Update Cache {' + key + " : " +value+ "}");
    const newData = {...data[name], ...{[key]: value}};
    client.writeQuery({
      data:{ [name] : newData },
      query
    });
}

Если я выхожу из консоли, свойства готовности или продолжительности в компонент игрока, я вижу, что они установлены на правильные значения, а затем сброшены на исходные значения. Я также вижу, что «Кэш обновления» срабатывает только один раз, поэтому консоль выглядит так: 

duration is:  5
duration is:  5
Update Cache {duration : 10.8}
duration is:  10.8
duration is:  5

Версии 

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @apollo/react-hooks: ^3.1.5 => 3.1.5
    apollo-cache-inmemory: ^1.6.6 => 1.6.6
    apollo-client: ^2.6.10 => 2.6.10
    apollo-link-context: ^1.0.20 => 1.0.20
    apollo-link-http: ^1.5.17 => 1.5.17
    apollo-react: ^0.7.1 => 0.7.1
...