Vue Storefront is now Alokai! Learn More
First request

First request with Alokai Connect

In the previous sections, we have successfully installed and configured Alokai Connect. Now, it is time to learn how the data is flowing in the application. For a deep dive in the Alokai architecture, please refer to the Architecure Overview. In this guide, we will focus on a high-level overview of the data flow in the Alokai Connect.

Data flow

Right now, we can visualize our application as shown in the diagram below:

Alokai Application

The Storefront is a Next.js application located in apps/storefront. It is responsible for rendering the UI and handling the user interactions. The Storefront is using the Alokai SDK to communicate with Alokai Middleware. The Alokai Middleware is an Express.js application located in apps/middleware. It is responsible for handling the requests from the Storefront and communicating with the SAP Commerce Cloud.

The data flow is as follows:

  1. The Storefront uses SDK methods to request data from the Alokai Middleware.
  2. The Alokai Middleware handles the request and communicates with the SAP Commerce Cloud.
  3. The SAP Commerce Cloud returns the requested data to the Alokai Middleware.
  4. The Alokai Middleware returns the data to the Storefront.

Look at the diagram below to visualize the data flow:

Alokai Data Flow

Having a high-level overview of the data flow, we can now proceed to the next section to make our first request to the SAP Commerce Cloud.

First request

To create your first request, let's use the existing storefront/app/page.tsx file. We will use searchProduct SDK method to get the list of products from the SAP Commerce Cloud. For this example, we will utilize Next.js React Server Components to fetch the data on the server side.

import { getSdk } from "../sdk/sdk.config"

const sdk = getSdk();

export default async function Page() {
  const { products } = await sdk.sapcc.searchProduct({});

  console.log(products?.map((product) => product.name));

  return <div>Page</div>
}

In the code above, we are using Alokai SDK serachProduct method to send a request to Alokai Middleware on /searchProduct endpoint. Middleware then sends a necessary request to SAP Commerce Cloud and returns response back to Storefront.

To run the application, execute the following command:

npm run dev

Navigate to http://localhost:3000 in your browser. You should see the list of product names in the console.

First Request

You can find complete implementation in the first-request branch

Summary

In this guide we have successfully utilized Alokai Connect to create our first request to get data from SAP Commerce Cloud in Alokai Next.js application. We also got a better understanding of data flow and how to use SDK and Middleware to fetch data.

In the next section, we will learn how to build UI with Storefront UI - Alokai UI components library for eCommerce applications.

Next: Build Product Details page with Storefront UI

Learn how to build responsive and accessible UI with Storefront UI components.