Shopify Embedded App Bridge Does NOT work

[yinghechen]

Hi, I have an embedded app 58128990209,  and I have turned on its embedded option in app configuration.  

The app has been successfully embedded in Shopify Admin console, but the App Bridge doesn't work for me. When I access the react hook of useAppBridge, I can console the config as (don't worry about data leak, it's a test app):

1. apiKey: "e81f321eaf4ca36c21090d47f695c86e"
2. host: "YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvZGRkZHRlc3RkZGRkdGVzdA"
3. locale: "en-US"
4. shop: "ddddtestddddtest.myshopify.com"

Not sure what's wrong with this Shopify hook, but Shopify nav-menu, and Toast doesn't give me any result.

I have this script added to my root:

<meta name="shopify-api-key" content="e81f321eaf4ca36c21090d47f695c86e" />

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

And AppBridge react code: 

const shopify = useAppBridge();

console.log(110, shopify);

root.render(

<React.StrictMode>

<NavMenu>

<a href="/" rel="home">Home</a>

<a href="/templates">Templates</a>

<a href="/settings">Settings</a>

</NavMenu>

<ApolloProvider client={client}>

<App />

</ApolloProvider>

</React.StrictMode >

);

shopify.toast.show('Test success');

Is that possible the host string is incorrect ? How to debug this. Thank you so much !

[EcomGraduates]

Ensure that the App Bridge is correctly set up before trying to use it.

import { AppProvider } from '@shopify/app-bridge-react';
import { BrowserRouter as Router } from 'react-router-dom';

const config = {
  apiKey: 'e81f321eaf4ca36c21090d47f695c86e',
  host: new URLSearchParams(window.location.search).get('host'),
  forceRedirect: true,
};

root.render(
  <AppProvider config={config}>
    <Router>
      <React.StrictMode>
        <NavMenu>
          <a href="/" rel="home">Home</a>
          <a href="/templates">Templates</a>
          <a href="/settings">Settings</a>
        </NavMenu>
        <ApolloProvider client={client}>
          <App />
        </ApolloProvider>
      </React.StrictMode>
    </Router>
  </AppProvider>
);

App Bridge is imported correctly:

import { useAppBridge } from '@shopify/app-bridge-react';
import { Toast } from '@shopify/app-bridge/actions';

const MyComponent = () => {
  const app = useAppBridge();

  useEffect(() => {
    const toast = Toast.create(app, { message: 'Test success' });
    toast.dispatch(Toast.Action.SHOW);
  }, [app]);

  return <div>My Component</div>;
};

export default MyComponent;

[yinghechen]

Thanks for your response. It seems your solution is identical to my code. I am using the latest version https://shopify.dev/docs/api/app-bridge-library#react so you no longer need to declare provider. as long as you add:

<meta name="shopify-api-key" content="e81f321eaf4ca36c21090d47f695c86e" />

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

And I see the Shop and Host parameter are passed in as query params correctly.

However, I still have trouble call the app bridge, even after I console.log the appBridge object successfully 

Any other hints are highly appreciated !