Host undefined issue on changing side navigation programmatically in next js app

Gulshan333
Shopify Partner
2 0 0

Hey Guys I'm facing an issue! I want to change side navigation(navigate programmatically) when I do some action in my app UI for example a button click. When action happens I'm using router.push('/help')  method from nextjs . But I got host undefined error from shopify-app-bridge. I have tried a lot since morning couldn't find solution & almost all the solutions I found are react related not next js.  Any help would be appreciated.

//_app.js file code

class MyProvider extends React.Component {
  static contextType = Context;
  //import hooks useStore in this file
  render() {
    // const app = this.context;
    console.log(this.context)
    const app = createApp({
      apiKey: API_KEY,
      host: _HOST,
      forceRedirect: true,
    });

    setGlobalData("app", app);

    getSessionToken(app).then((token) => {
      console.log("token generated", token);
    });
    const client = new ApolloClient({
      fetch: authenticatedFetch(app),
      fetchOptions: {
        credentials: "include",
      },
    });

    return (
      <ApolloProvider client={client}>{this.props.children}</ApolloProvider>
    );
  }
}
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, shopOrigin: "" };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log("componentDidCatch-error:",error);
    console.log("componentDidCatch-errorInfo:",errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            height: "100vh",
            textAlign: "center",
          }}
        >
          <Text> Something went wrong! Please refresh the page.</Text>
          {/* 
  */}
         <Text>
           If the issue still persist, please contact &nbsp;
          <Text as="span">
            <Link url="mailto:sid@giftkart.app" external>sid@giftkart.app</Link>
            </Text>
         </Text>
        </div>
      );
    }

    return this.props.children;
  }
}

class MyApp extends App {
  state = {
    toggleIsUserMenuOpen: false,
  };


  render() {
    console.log("this.props.host", this.props.host);
    console.log("this.props",this.props)
    const { Component, pageProps, shopOrigin, host } = this.props;

    globalShopName = shopOrigin;
    setShopName(shopOrigin);

    const { toggleIsUserMenuOpen } = this.state;

    _HOST = host;

    const config = { apiKey: API_KEY, host:host, forceRedirect: true };
    return (
      <React.Fragment>
        <Head>
          <title>GiftKart</title>
          <meta charSet="utf-8" />
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
          />
          <script
            src="https://kit.fontawesome.com/e20sdfsd9.js"
            crossOrigin="anonymous"
          ></script>
        </Head>
        <ErrorBoundary>
        <AppProvider i18n={translations}>
            <Provider config={config}>
              <MyProvider>
                <StoreProvider >
                  <Component {...pageProps} shopOrigin ={shopOrigin} />
                </StoreProvider>
              </MyProvider>
            </Provider>
        </AppProvider>
        </ErrorBoundary>
      </React.Fragment>
    );
  }
}

MyApp.getInitialProps = async ({ ctx }) => {
  console.log('Im host',ctx.query.host);
  return {
    shopOrigin: ctx.query.shop,
    host: ctx.query.host,
  };
};

export default MyApp;

 

Reply 1 (1)

ericute
Shopify Partner
57 4 7

@Gulshan333 I'm having an undefined host too. Were you able to solve your problem? If so, may I ask how?