Почему Relay Modern делает новые запросы вместо использования кеша - PullRequest
Новая
       81

Почему Relay Modern делает новые запросы вместо использования кеша

0 голосов
/ 29 апреля 2018

У меня есть страница, где вы можете увидеть текущий пункт и нажать «Далее», чтобы увидеть следующий. Вот как выглядит этот компонент: 

<code>class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      ids: ["VXNlcjox", "VXNlcjoy"]
    };
    this.onNext = () => this.setState(s => ({ index: (s.index + 1) % 2 }));
  }

  render() {
    const { index, ids } = this.state;
    return (
      <div>
        <button type="button" onClick={this.onNext}>
          next
        </button>
        <QueryRenderer
          environment={environment}
          query={graphql`
            query App_Query($id: ID!) {
              node(id: $id) {
                id
              }
            }
          `}
          variables={{ id: ids[index] }}
          render={({ error, props }) => {
            if (error) {
              return <div>Error!</div>;
            }
            if (!props) {
              return <div>Loading...</div>;
            }
            return <pre>{JSON.stringify(props, null, 2)}
; }} /> ); } }

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

Но то, что я вижу , заключается в том, что новый запрос делается на вкладке сети каждый раз, когда я нажимаю «Далее», даже если этот Элемент запрашивался ранее. Если я открою Relay DevTools - товары с этим идентификатором уже в магазине:

Relay DevTools

Так почему каждый раз делается новый запрос? Разве Relay Modern не должен повторно использовать ранее кэшированные данные?

Ответы [ 2 ]

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

Вы можете передать QueryRenderer один из следующих dataFrom реквизитов:

  • NETWORK_ONLY - возвращаться в сеть каждый раз.
  • STORE_THEN_NETWORK - попытка выполнить рендеринг из хранилища, затем обновить хранилище свежими данными из сети.

Попробуйте это: 

<QueryRenderer
  dataFrom="STORE_THEN_NETWORK"
  ...
/>

См. Реализацию: https://github.com/facebook/relay/blob/master/packages/react-relay/modern/ReactRelayQueryRenderer.js#L297-L299

0 голосов
/ 30 апреля 2018

Не думаю, что рендерер запросов предназначен для работы по умолчанию.

Возможно, вы ищете этот relay-query-lookup-renderer

...