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
<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;
