Polaris-react: Best practice for using the new app bridge context

[dan-gamble]

Issue summary

Feel a tad silly with this one as I feel it is actually probably quite simple.

I'm looking to use the Redirect from the app-bridge. (import {Redirect} from '@shopify/app-bridge/actions').

The issue I'm having is around the app part.

app.dispatch(
  Redirect.toRemote({
    url: 'http://example.com',
  }),
)

Above it mentions doing:

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

But given we're already using the <Provider> I'd imagine this is accessible in context somewhere like it used to be?

I've tried going down the createApp route but I'm not sure where I should be saving this to have it accessible globally. Given we're using next I can't use window for example.

Apologies if this is the wrong place to ask this but the app-bridge repos are internal.

Edit

I've noticed when looking at the code of the React components from @shopify/app-bridge-react they use the internal context (var context_1 = require("../../context");) so maybe this isn't globally accessible?

[probot-shopify[bot]]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[AndrewMusgrave]

Hi @dan-gamble we have an example in our docs explaining how to use our app bridge instance. Let me know if this helps!

[dan-gamble]

Hey @AndrewMusgrave,

I did come across that but saw it was deprecated. I wondered how we should be using it going forward?

I'm using the https://github.com/Shopify/shopify-app-node as a base and am currently doing:

class MyApp extends App {
  static async getInitialProps(server) {
    const shopOrigin = server.ctx.query.shop;
    return { shopOrigin };
  }
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const app = createApp({
      apiKey: 'API key from Shopify Partner Dashboard',
      shopOrigin: shopOrigin,
    });

    return (
      <Container>
        <AppProvider>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: true
            }}
          >
            <ApolloProvider client={localClient}>
              <Component {...pageProps} appBridge={app} />
            </ApolloProvider>
          </Provider>
        </AppProvider>
      </Container>
    );
  }
}

But feel like this is a little bit hacky and I'd have to prop drill to have access to the app bridge.

Would appreciate any guidance on this but it could just be me being relatively naive to all of this.

[dan-gamble]

Looks like this is answered here but the issue i’m having is import { Context } from '@shopify/app-bridge-react'; as 1.6.6 only exports the components and not the context.

[BPScott]

ping @timlayton as the man with context on uh, app-bridge context

@dan-gamble it looks like The change to add Context to the root export is in master but hasn't been released just yet. For the moment you can do import {AppBridgeContext} from '@shopify/app-bridge-react/context'; which points to the same thing.

[dan-gamble]

That’s awesome, thank you @tmlayton!

I did dip in to my node_modules to see if i could work it out but it’s a bit harder with the released version vs source

[BPScott]

Looks like app-bridge-react 1.6.7 is now released, which includes Context in the root import. import { Context } from '@shopify/app-bridge-react'; should work with that.

[Iciren93]

Hi Team,
I am having similar issue related to not being able to access global config value in my index.js assigned to in _app.js.
Following this tutorial by shopify:
https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris

I have tried the above suggestion but Context and AppBridgeContext doesn't work. I would also like to know that since the fix is released for app-bridge-react 1.6.7 but it seems to be that the latest version is only 1.25.0. Is there another version of app-bridge?
Npm: https://www.npmjs.com/package/@shopify/app-bridge-react

Would appreciate it if anybody can point me in the right direction and sorry if this is not the right place to ask. Thank you

[BPScott]

I would also like to know that since the fix is released for app-bridge-react 1.6.7 but it seems to be that the latest version is only 1.25.0

Look closer at those minor version numbers, 25 is larger than 6 :)

The app-bridge team recently created a repo where you can report issues to them, For any further app-bridge issues you should open an issue in https://github.com/Shopify/shopify-app-bridge

[Iciren93]

Hi Scott,

Thanks for pointing that out. I guess the sleepless night figuring out this issue for the last couple of days made me slightly delirious.

Thank you for the link. Will see if similar issue has been raised there or I'll raise one.