App Bridge POS with React not rendering new state

Solved
Highlighted
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) {
            cart.dispatch(Cart.Action.FETCH);
        } else {
            var toastOptions = {
                message: 'Cart is not available',
                duration: 5000,
                isError: true
            };
            var toastError = Toast.create(app, toastOptions);
            toastError.dispatch(Toast.Action.SHOW);
        }
    });

    

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

    cart.dispatch(Cart.Action.FETCH);


    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;
0 Likes

Success.

New Member
2 1 0

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

0 Likes