Solved

Bug? Not being notified of app-bridge ContextualSaveBar events

james_beninger
Shopify Partner
3 0 0

 

I'm having a weird issue where my react components aren't receiving notifications directly from the (app-bridge, not polaris) ContextualSaveBar, but they receive the exact same notifications from the app-bridge itself when I subscribe to the fully-qualified action names.  I'm not sure if this is a bug or just me not understanding how the app-bridge or react work.

 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AppBridgeContext } from '@shopify/app-bridge-react/context';
import { ContextualSaveBar } from '@shopify/app-bridge/actions';
import { Provider } from '@shopify/app-bridge-react';
import { Heading } from '@shopify/polaris';


const apiKey = 'SOME-API-KEY';
const shopOrigin = 'SOME-STORE';


class App extends Component {
  componentDidMount() {
    this.saveBar = ContextualSaveBar.create(this.context, {});
    this.saveBar.dispatch(ContextualSaveBar.Action.SHOW);

////////// THE IMPORTANT BIT: Here's where I subscribe to notifications from both the save bar and the app-bridge itself. I only ever receive the latter this.saveBar.subscribe(ContextualSaveBar.Action.SAVE, () => console.log("Save Clicked (subscribed to ContextualSaveBar)")); this.context.subscribe('APP::CONTEXTUAL_SAVE_BAR::SAVE', () => console.log("Save Clicked (subscribed to App Bridge)")); } render() { return <Heading>Contextual Save Bar Test</Heading> } } App.contextType = AppBridgeContext; ReactDOM.render(<Provider config={ { apiKey: apiKey, shopOrigin: shopOrigin } }><App /></Provider>, document.getElementById('root'));

 

My package.json

  "dependencies": {
    "@shopify/polaris": "3.16.0",
    "@shopify/app-bridge-react": "^1.6.7",
    "lodash": "4.17.11",
    "mkdirp": "0.5.1",
    "node-sass": "4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-lifecycle-component": "4.0.0",
    "react-redux": "7.0.2",
    "react-scripts": "2.1.8",
    "redux": "4.0.1",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "rimraf": "^2.6.3"
  },

 

Accepted Solution (1)

Busfox
Shopify Staff (Retired)
628 49 110

This is an accepted solution.

Hi @james_beninger,

 

I checked with our team of developers who work on the App Bridge, and they've let me know that the snippet you sent SHOULD work, but are hoping you could give some additional context. Specifically, what does ContextualSaveBar.Action.SAVE evaluate to when you run that app? Are you seeing any errors at all?

 

Cheers

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 3 (3)

Busfox
Shopify Staff (Retired)
628 49 110

This is an accepted solution.

Hi @james_beninger,

 

I checked with our team of developers who work on the App Bridge, and they've let me know that the snippet you sent SHOULD work, but are hoping you could give some additional context. Specifically, what does ContextualSaveBar.Action.SAVE evaluate to when you run that app? Are you seeing any errors at all?

 

Cheers

To learn more visit the Shopify Help Center or the Community Blog.

james_beninger
Shopify Partner
3 0 0

No matter what I do now, I can't reproduce the problem.  If it crops up again, I'll see if I can find out exactly what was causing it.  For now, it looks like the problem was somewhere on my end.

james_beninger
Shopify Partner
3 0 0

It looks like this is a Windows-only problem.  My app was created with create-react-app.  When I build it in Windows (cygwin environment), I get the problem described above.  When I build it using my Mac, the problem disappears.

 

I assume this is somehow related to webpack and the order in which it initializes javascript modules, but it's hard to say exactly where the problem is occurring.  I don't intend to look any deeper into it right now since I have a workaround.  I just wanted to record my findings for posterity.