App Bridge POS with React not rendering new state

New Member
2 1 0

I am trying to grab the information from the development store Cart in the POS and pass it as prop to a child component. But the app seems to break.


I see the "Loading" h1 tag for a split second before the iFrame goes blank. The Shopify POS app itself does not crash though.


If I do not update the state I am able to see the items in the Cart in the console log. "console.log('[Client] cart update', payload);"


So I don't think the problem is in connecting to the Cart but actually being able to use the payload. 


Please take a look at the sample code:




import React, { useState } from 'react';
import MainScreen from './pages/MainScreen';
import createApp from '@shopify/app-bridge/development';
import { Cart, Group, Toast } from '@shopify/app-bridge/actions';
import { Provider } from '@shopify/app-bridge-react';

import './App.css';
import '@shopify/polaris/styles.css';
import './styles/styles.scss';

function App() {

    const [isLoading, setIsLoading] = useState(false);

    const [updatedCart, setUpdatedCart] = useState([]);

    const app = createApp({
        apiKey: apiKey,
        shopOrigin: shopOrigin

    // Cart created 
    var cart = Cart.create(app);

    // Cart updated
    cart.subscribe(Cart.Action.UPDATE, function (payload: Cart.Payload) {
        console.log('[Client] cart update', payload);

    // Feature Detection, checking if an action is available before making a call 
    app.featuresAvailable(Group.Cart).then(function (state) {
        var _ref = state.Cart && state.Cart[Cart.Action.FETCH],
            Dispatch = _ref.Dispatch;

        if (Dispatch) {
        } else {
            var toastOptions = {
                message: 'Cart is not available',
                duration: 5000,
                isError: true
            var toastError = Toast.create(app, toastOptions);


    // Subscribing to Cart updates
    var unsubscriber = cart.subscribe(Cart.Action.UPDATE, function (payload: Cart.Payload) {
        console.log('[Client] fetchCart', payload);
        console.log('dispatch', payload)
        console.log("updated cart", updatedCart);


    const config = {
        apiKey: apiKey,
        shopOrigin: shopOrigin

    console.log('isLoading', isLoading);

    return (
                isLoading ?
                    <Provider config={config}>
                        <MainScreen data={updatedCart} />
                    </Provider> : <h1>Loading</h1>

export default App;
New Member
2 1 0

This is an accepted solution.

Figured it out, turned out I wasn't using the payload correctly. Need to be more specific when handling it.