Как я могу предотвратить слишком быстрое подключение приложения Shopify Polaris React к сервису Shopify?

Я новичок в реакции и пытаюсь создать базовое приложение Shopify, используя React и пакет Polaris React.

TL: DR;

Как я могу предотвратить рендеринг компонента React до тех пор, пока данные не будут получены асинхронно с сервера? ИЛИ Как правильно подключить приложение Polaris к сервису shopify?

Полное объяснение

Проблема в том, что функция рендеринга должна добавить домен магазина к атрибуту элемента <AppProvider/>. Т.е. <AppProvider shopOrigin = "https://user-store.myshopify.com"/> Однако домен различается в зависимости от магазина, в котором используется приложение.

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

render() {

    return (
      <AppProvider
        shopOrigin = {this.state.shop} {/* Null when first rendered  */}
        debug = {true}
      > ... </AppProvider>

Это приводит к тому, что приложение Polaris пытается подключиться к Shopify со значением Null для домена магазина, и все ломается.

Я смог предотвратить это, заставив функцию рендеринга возвращать Null при первом рендеринге, но это кажется хакерским.

 render() {   

    if (typeof this.state.shop === 'undefined') {/* true on first render */}
      return null; { /* prevent rendering at this stage */ }

    return (
      <AppProvider
        shopOrigin = {this.state.shop}
        debug = {true}
      > 

Вот асинхронная функция, которую я использую для получения домена с сервера.

 constructor() {
    super();

    this.state = {};
  }

  componentDidMount() {
    this.callApi()
      .then(res => this.setState(res))
      .catch(err => console.info(err));
  }

  callApi = async () => {
    const response = await fetch('/shopify/config');
    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);

    return body;
  };