Loading app-bridge-react fail

Solved
Highlighted
Excursionist
36 2 1

Follow the doc for Loading component I get the follow error

 

ReferenceError: isTheAppLoading is not defined

 

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider, Loading } from '@shopify/app-bridge-react';
import Cookies from "js-cookie";
import '@shopify/polaris/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  fetchOptions: {
    credentials: 'include',
  },
});

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: false };
    const loading = isTheAppLoading();
    const loadingComponent = loading ? <Loading /> : null;
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
        {loadingComponent}
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

export default MyApp;

Any idea or I have to write that function myself instead of using what have in package?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
17 5 3

This is an accepted solution.

Hey tokito,

 

I'm apologize that you're running into issues while following our documentation.

 

The function in question is an example function, not one that we provide with App Bridge React.  You'll have to define a function or determine if the app is loading or not based off of state in your application. I'm sorry about the confusion.

 

That function could be defined in your `MyApp` class.

class MyApp extends App {
    isTheAppLoading() {
        return true; // return a boolean based off of your apps state.
    }
...
}
Andrew Apperley
(App Bridge) Mobile Developer
0 Likes