Loading app-bridge-react fail

Solved
tokito
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
andrew-apperley
Shopify Staff
Shopify Staff
20 5 4

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
juleshaydn
New Member
4 0 0

This still returns the following error for me. (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 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 {
  isTheAppLoading() {
    return true;
  }
  render() {
    const { Component, pageProps } = this.props;
    const loading = isTheAppLoading();
    const loadingComponent = loading ? <Loading /> : null;
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          {loadingComponent}
          <AppProvider i18n={translations}>
            <ApolloProvider client={client}>
              <Component {...pageProps} />
            </ApolloProvider>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}

export default MyApp;

 

0 Likes