OrderCloud Product Listing Page using NextJS/TypeScript deployed to Vercel

In one of my earlier blogs, I used an asp.net core mvc application to display the OrderCloud Product list 

While my prime goal is to build a simple CRUD-based application for products using the JavaScript SDK, in this blog post, I take the basic steps and display just the list using TypeScript and OrderCloud API.

Vercel link

GitHub

My OrderCloud Product List created using NextJS and TypeScript, deployed to Vercel:

Some details:

npm install ordercloud-javascript-sdk:

Started with the following code from OrderCloud JavaScript SDK page:

Then, changed mind to use Auth.Anonymous since I just need to view the product list in this use case. Also, didn't want to expose too much secrets. So, my index.tsx code looks like this:

////////////////////////

import type { NextPage } from 'next'

import { getProducts } from './api/getProducts';

import { ApiRole,Configuration,Auth, Tokens, Product } from 'ordercloud-javascript-sdk';

type Props = {

    productList: Product[];

};

export async function getStaticProps() {

    const clientID = '4299DFFC-DCA4-4077-BD40-661BB9F96E2F'; 

    const scope:ApiRole[] = ['ProductAdmin'];

    Configuration.Set({

        baseApiUrl: "https://sandboxapi.ordercloud.io"

    });

    

    const authResponse = await Auth.Anonymous(clientID, scope);

    Tokens.SetAccessToken(authResponse.access_token);

    

    return await {

        props: { productList: await getProducts() },

    };

}

const Home: NextPage<Props> = (props) => {

    const prodList = props.productList && (

        <div className='content'>

            <h1>Welcome</h1>

            <p>My Product List from OrderCloud MarketPlace</p>

            <table className="container">

                <thead>

                    <tr>

                        <th>Name</th>

                        <th>Description</th>

                        <th>Count</th>

                        <th>Width</th>

                        <th>Height</th>

                        <th>Length</th>

                        <th>Weight</th>

                    </tr>

                </thead>

                <tbody>

                    {props.productList.map((prod, index) => (

                        <tr key={index}>

                            <td>{prod.Name}</td>

                            <td>{prod.Description}</td>

                            <td>{prod.SpecCount}</td>

                            <td>{prod.ShipWidth}</td>

                            <td>{prod.ShipHeight}</td>

                            <td>{prod.ShipLength}</td>

                            <td>{prod.ShipWeight}</td>

                        </tr>

                    ))}

                </tbody>

            </table>

        </div>

    );

    return prodList;

}

export default Home

/////////////////////

Used getStaticProps:

On executing npm run build, you could find axios is a dependency:

> Build error occurred

Error: Cannot find module 'axios'

  code: 'MODULE_NOT_FOUND',

So, execute npm install axios and npm install build should be successful now:

There were two main errors I had tough time resolving:

1. invalid_client error:

2. Unauthorized error:

It took me sometime to realise that the invalid_client was due to the fact that  I was running the application in the sandbox environment but the call was actually made to - 

url: 'https://api.ordercloud.io/oauth/token'

So, similar to the .net application, I had to override the api url and that is when I realised that I can override the Configuration type as per my wish with the following block:

The Unauthorized error occurred since the token was poorly scoped and wasn't getting passed to the Product List API header. So, when I added the following block before the api call, all was fine:

You can also console.log the Product List as follows and that is helpful for checking if the execution is happening as per the written code:

One of the other issues I faced was the page size of the list is usually set to 20 and I had more than 20 records:

So, this option of setting the record count in a page is helpful:

The other area that was interesting is, building the grid, took me a few iterations to understand the structure of the object model before I got to this:

Hope to build on this project structure to setup a CRUD functionality for products: