I am struggling to get @shopify/app-bridge working with my react based embedded app(with RoR setup). I am using react-router and want my history to propogate to shopify admin main url. So when I use following it works all fine:
// RoutePropagator.jsx
export default withRouter(function RoutePropagator({ location }) {
ShopifyApp.pushState(location.pathname);
return null;
});
// And I render it in my main app like so:
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom"
import enTranslations from '@shopify/polaris/locales/en.json'
import {Card, Tabs, AppProvider, Page} from '@shopify/polaris'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import { Link } from 'react-router-dom'
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react'
import {getShopOrigin} from '@shopify/app-bridge'
import RoutePropagator from './RoutePropagator'
....
....
function AdapterLink ({ url, ...rest }) {
return <Link to={url} {...rest} />
}
const alertOptions = {
position: positions.BOTTOM_CENTER,
timeout: 5000,
offset: '30px',
transition: transitions.SCALE
}
export default function App(props) {
return (
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Router>
<AppProvider i18n={enTranslations} linkComponent={AdapterLink}>
<AppBridgeProvider
config={{ apiKey: ShopifyApp.apiKey, shopOrigin: getShopOrigin() }}
>
<RoutePropagator />
<Page title='My title' style={{maxWidth: '100%'}}>
<Switch>
<Route exact path={somePath} component={ABC} />
</Switch>
</Page>
</AppBridgeProvider>
</AppProvider>
</Router>
</AlertProvider>
);
}
As you can see i am using both providers from polaris and react-app-bridge, thats because polaris does not work without its provider(complaints about i18 translations). Anyway, main point is not these providers here, i have been playing around with app-bridge for a long time to get something working without any luck so far, explored numerous issues on github and community forums as well as I exploring docs and code of these libraries on github.
Issue is, ShopifyApp.pushState(location.pathname); works, but if I change this component to:
import React from 'react';
import { withRouter } from 'react-router';
import createApp from '@shopify/app-bridge';
import {History} from '@shopify/app-bridge/actions';
export default withRouter(function RoutePropagator({ location }) {
// const app = React.useContext(AppBridgeContext);
const app = createApp({
apiKey: ShopifyApp.apiKey,
shopOrigin: ShopifyApp.shopOrigin.slice(8),
});
const history = History.create(app);
history.dispatch(History.Action.PUSH, `${location.pathname}`);
console.log(location);
// ShopifyApp.pushState(location.pathname);
return null;
});
It neither complaints about anything neither does it work.
I also obviously tried official way:
import React from 'react';
import {withRouter, RouteComponentProps} from 'react-router';
import {RoutePropagator} from '@shopify/react-shopify-app-route-propagator';
import {Context as AppBridgeContext} from '@shopify/app-bridge-react';
export default withRouter(function Routes(props) {
console.log(props);
const app = React.useContext(AppBridgeContext);
console.log(AppBridgeContext)
console.log(app);
console.log(!props.server && app && props.location);
return !props.server && app && props.location ? (
<RoutePropagator location={props.location} app={app} />
) : null;
});
But no luck, this actually goes into the action till this line: https://github.com/Shopify/quilt/blob/master/packages/react-shopify-app-route-propagator/src/hook.ts#L41 to make it work, but location never propagates to the URL.
I added breakpoints and did my debugging to conclude it does go here but location never changes.
So all the variations I have tried to use app-bridge have gone in vain, and I think I am stuck with EASDK for now. Unless there is any resolution to this issue i will have to build my whole app around EASDK and just hope it does not get deprecated.
I am happy to share anymore details or whatever needed.
Also if this belongs in github issue, please mention so I can move it to there.