5 // Updating the Frontend

Now that our APIs provide the new price field, we actually want to see it in the UI.

First we update the query and subscription that fetches the list of placed orders:

hooks/usePlacedOrderList.ts

const PlacedOrderListQuery = graphql(`
    query PlacedOrderListQuery($input: GetPlacedOrderListInput!) {
        getPlacedOrderList(input: $input) {
            data {
                id
                name
                date
                ingredients
                price
            }
        }
    }
`);

const PlacedOrderListSubscription = graphql(`
    subscription PlacedOrderListSubscription($input: SubscribePlacedOrderListInput!) {
        subscribeToPlacedOrderList(input: $input) {
            __typename
            ... on PlacedOrder {
                id
                name
                date
                ingredients
                price
            }
        }
    }
`);

Next thing we need to do is update our order list table:

components/OrderList.tsx

export const OrderList: FC<OrderListProps> = ({ jwt }) => {
    const { data, loading } = usePlacedOrderList(jwt);

    return (
        <div>
            <h1>Orders</h1>
            {loading && <Loading />}

            <table>
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Date</td>
                        <td>Ingredients</td>
                        <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                    {data?.map(item => {
                        const date = new Date(item.date);
                        return (
                            <tr key={item.id}>
                                <td>{item.name}</td>
                                <td>
                                    {date.toLocaleDateString()} {date.toLocaleTimeString()}
                                </td>
                                <td>{item.ingredients.join(", ")}</td>
                                <td>{item.price}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
};

Thats it! Now you can see the price of each placed order in the order list.