Data Flow

The below document describes the data flow in the typical Alokai application using our SDK and Middleware.

On a high level, the data flow in Alokai is relatively simple and has only two major steps:

Storefront Data Flow

In the storefront we usually call a composable/hook (Vue/React) directly from a component. It’s responsible for binding the data returned by SDK with the framework-specific features like Vue.js reactivity system or state managment library.

Every composable/hook in our storefront under the hood uses SDK methods. SDK methods retrieve data from the Middleware. Before the method is called, it runs all registered “before” interceptors from SDK extension that can modify its parameters (args). In the same way, it checks for “after” interceptors that can modify the response (res).

At the very bottom of Storefront flow, an SDK method calls Alokai Middleware. Let’s see how the data flows there!

Middleware Data Flow

On the Middleware side, each request is propagated to the API Client. The URL determines which API Client will be used. For example, calling /sapcc/getProduct endpoint will run getProduct method from the SAP Commerce Cloud integration represented by sapcc tag in the middleware configuration file.

Each API Client and method exposes hooks that allow you to change the initial configuration of the integration, modify method arguments, change response, or just run other custom code.

Using GraphQL

You probably noticed that the protocol used to communicated with the middleware is REST protocol. It doesn't mean you can't use GraphQL.

Our Middleware can connect to any data source, no matter what protocol it's using. If an integration is using GraphQL API it already has default queries/mutations associated to certain methods stored on the middleware layer. You can pass custom ones directly from the frontend or keep them in the middleware layer to reduce payloads and shave few kB's from your frontend bundle.

// in the frontend
const { search } = useProduct();

search({
  customQuery: {
    products: 'my-products-query', // you can reference query on the middleware by string or just pass it directly
    metadata: { size: 'xl' },
  },
});