Как обновить переменные с помощью createRefetchContainer?

Поскольку React Relay createPaginationContainer не поддерживает нумерацию страниц на основе смещения, следующим лучшим вариантом будет обработка этой функции с помощью createRefetchContainer.

В примере, представленном в документации Relay Modern https://facebook.github.io/relay/docs/refetch-container.html, когда он будет реализован, будет перемещаться вперед один раз, но только потому, что мы переходим от нашего состояния по умолчанию со смещением 0 к нашему новому состоянию 0 + 10. Последующие события щелчка производят тот же результат, поскольку значения не сохраняются.

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

Я столкнулся с этой проблемой в репозитории, который, похоже, решил эту проблему, https://github.com/facebook/relay/issues/1695. Если это так, то документация не была обновлена.


reactjs relay relayjs relaymodern
person Scot Matson    schedule 04.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Итак, в приведенном выше примере из документации обновление происходит здесь:

_loadMore() {
  // Increments the number of stories being rendered by 10.
  const refetchVariables = fragmentVariables => ({
    count: fragmentVariables.count + 10,
  });
  this.props.relay.refetch(refetchVariables, null);
}

Итак, проблема, с которой я столкнулся в этом конкретном примере, заключается в том, что мы извлекаем состояние по умолчанию из fragmentVariable, поэтому, по сути, никаких реальных изменений не происходит. Это может быть приемлемо в зависимости от вашей реализации, но я чувствую, что для большинства случаев использования мы хотели бы, чтобы значения фактически обновлялись как переменные в обновленном фрагменте.

Итак, то, как я подошел к этому с точки зрения моей разбивки на страницы на основе смещения, было...

_nextPage = () => {
  if ((this.state.offset + this.state.limit) < (this.state.total - this.state.limit) {
    this.setState({ offset: (this.state.offset + this.state.limit), () => {
      this._loadMore();
    }
  }
}

_loadMore = () => {
  const refetchVariables = {
    offset: this.state.offset,
    limit: this.state.limit
  }
  this.props.relay.refetch(refetchVariables, null);
}

Может быть опечатка, я сейчас не смотрю на свой код. Но, используя состояние компонента, вы сможете эффективно обновлять переменные refetchContainer.

person Scot Matson    schedule 05.08.2017