Загрузка данных из хранилища реле во время загрузки запроса

Question

У меня есть общие Header и Footer, которые отображают данные о том, что они могут уже находиться в хранилище реле, и основной PageComponent, который ожидает данные из «запроса», но я не хочу отображатьполный экран загрузки для пользователя, я хочу отобразить верхний и нижний колонтитулы и экран загрузки или содержимое посередине.

Так что, как вы знаете, если я оберну все внутри QueryRenderer, у меня будетдва варианта: либо запрос «загружается», либо данные доступны:

<QueryRenderer
  {...usualProps}
  render={({ error, props }) => {
    <div className="app-wrapper">
      { props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
    </div>
  }}
/>

Допустим, у меня есть способ извлечь данные из хранилища вручную (поскольку у нас нет чего-то вроде частичного рендеринга изхранилище), и я могу передать эту информацию общим Header и Footer во время загрузки основного запроса:

<QueryRenderer
  {...usualProps}
  render={({ error, props }) => {
    <div className="app-wrapper">
      <Header {...storeProps} {...props} />
      { props || error ? <PageComponent {...props} error={error} /> : <div>Loading...</div>}
      <Footer {...storeProps} {...props} />
    </div>
  }}
/>

Я обнаружил, что, поскольку у меня есть среда, я могу сделать что-то вроде этогочтобы получить информацию из магазина:

const storeProps = relayEnvironment.getStore().lookup({
  dataID: 'client:root',
  node: query().fragment, // special query with only the information I need for the `Header`
  variables: {}
});

Но тогда у меня есть несколько проблем:

• QueryRenderer удаляет данные, когда отключен: cry: (хотя информация, которую я прочиталфрО, это должно быть также извлечено Запросом, чтение из хранилища больше похоже на запасной вариант, в то время как запрос возвращается)
• Синтаксис выглядит неприлично
• Мне нужно создать запрос и скомпилировать его (В любом случае, я могу жить с этим)

Возможно, я неправильно подхожу к проблеме и, может быть, кто-то сделал что-то подобное и может подсказать мне несколько указателей.(В случае, если ничего не работает, мой план B состоит в том, чтобы использовать getDerivedStateFromProp для отправки информации о запросе в пользовательский контекст и сохранить ее там, например, чтобы избежать проблемы GC хранилища.)

TL: DR: Я хочу загрузитьданные из хранилища, когда запрос заканчивает загрузку, а затем используют данные, полученные из запроса.

Есть идеи?Дайте мне знать, если что-то не понятно

Answer 1

Реле имеет Observables и Cache, которые можно использовать в комбинации для достижения этой цели.

Вы можете импортировать {QueryResponseCache} из 'relay-runtime';

, а затем использовать его следующим образом:

const cache = new QueryResponseCache({
      size: CACHE_SIZE, // Number of responses to cache
      ttl: CACHE_DURATION, // duration in ms to keep the cache
    })

Теперь, когда вы получаете ответ от сервера, выможет хранить его как

cache.set(queryId, variables, payload)

и читать как:

cache.get(queryId, variables)

Теперь для наблюдаемых импортируйте {Observable} из 'relay-runtime';

Тогда вашиспользуйте его в своей сетевой загрузке так:

const fetchQuery = (operation, variables) => {
    return Observable.create(observer => {
      if (operation.operationKind !== 'mutation') {
        observer.next(cachedData) // cacheData fetched from cache
      }
      const jsonResponse = fetch(...);
      observer.next(jsonResponse);
      observer.complete();
    });
  };

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

Answer 2

Чтение магазина с relayEnvironment не является хорошим решением.Что вы думаете, если вы положите QueryRenderer для Header и еще один для Footer?Таким образом, каждый из них будет извлекать свои собственные данные отдельно от содержимого страницы.Это имеет смысл?

Надеюсь, это поможет:)