How to access App Bridge outside of a React component

[kbrooks]

Hi,

I'm trying to pull some service dependencies that need app bridge out of their present home in React components and into a Redux action. To do this, I need access to app bridge outside of react component, while still being able to use things like AppProvider/Provider as the base of my React hierarchy.

Unfortunately, the app bridge seems to be wired up automatically inside of the AppProvider (from @shopify/polaris) or Provider (from @shopify/app-bridge-react) components. I can instantiate the app bridge like this:

import { createApp } from '@shopify/app-bridge';

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

but there appears to be no way to inject this into a Provider component for the rest of the react app. I need to be able to access the app bridge so I can do oauth calls in a redux action.

[Trish_Ta]

Hi kbrooks,

You can try doing this to provide your own app instance:

import { createApp } from '@shopify/app-bridge';
import {Context} from '@shopify/app-bridge-react';

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

function MyApp() {
  return (
    <Context.Provider value={app}>
      <MyComponent />
    </Provider>
  );
}

One thing to note is when creating your own app instance you need to ensure that the `window` is accessible. Calling `createApp` while doing server side rendering will not work.

Cheers,

Trish

[iain-campbell]

You can also access the App Bridge client instance from the Provider component.

[kbrooks]

I tried using this approach with AppProvider from polaris 3.21.1 (I wasn't able to use Context.Provider like you suggested because AppProvider is required)

import React from 'react';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import App from './App';
import { AppProvider } from '@shopify/polaris';
import { Provider } from 'react-redux';
import createApp, { getShopOrigin } from '@shopify/app-bridge';
import { applyMiddleware, createStore } from 'redux';
import { appReducer } from './reducers';

const store = createStore(appReducer, applyMiddleware(thunk));

export const app = createApp({
  apiKey: __API_KEY__,
  shopOrigin: getShopOrigin(),
});

ReactDOM.render(
  <AppProvider value={app}>
    <Provider store={store}>
      <Card title="test card">Test card body<Card/>
    </Provider>
  </AppProvider>,
  document.getElementById('snap-shopify-root')
 

But I encountered the error

Uncaught Error {name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: Provided apiKey `54593…ect. Expecting `59baf1db005fd5b5927de8968e578ca0`", action: {…}, type: "APP::ERROR::INVALID_CONFIG", stack: "AppBridgeError: APP::ERROR::INVALID_CONFIG: Provid…ect. Expecting `59baf1db005fd5b5927de8968e578ca0`"}

I believe this is due to passing in a custom app to the AppProvider. How can I resolve this?

[kbrooks]

Ok that last issue was actually due to me messing up my configuration