Stats of Query

When multiple orders come in at once, you can make ice cream at once. You need to extract the insight of the current orders' ice cream amount, topping information, etc.

Create Query Maker

Before extracting insights, we need to define what data we want to query. A Query Maker allows users to filter data dynamically - like a barista checking orders by status to see which drinks to make next. Let's enhance our Slice to support flexible queries with search parameters.
First, let's update the Slice to accept status filters. The .search() method defines query parameters that users can set from the frontend:
apps/koyo/lib/icecreamOrder/icecreamOrder.signal.ts
Let's understand the key components of this Slice definition:
🔍.search()
Defines a searchable parameter that can be set from the frontend. Here, "statuses" accepts an array of IcecreamOrderStatus values to filter orders.
inWaiting / inPickup
Pre-defined slices with fixed status filters. inWaiting shows active and processing orders, while inPickup shows orders ready for customer pickup.
Add dictionary entries for the slice and its search parameter to enable localization:
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Now let's create a UI component that allows users to select which statuses to filter by. This Query Maker component uses the auto-generated store hooks:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Util.tsx
Key features of the Query Maker component:
🎣
st.use.queryArgsOfIcecreamOrderInPublic(): Auto-generated hook that reads the current query arguments from the store. Returns the statuses array.
📝
st.do.setQueryArgsOfIcecreamOrderInPublic(): Updates the query arguments in the store, which automatically triggers a re-fetch of the filtered data.
Finally, add the Query Maker to your page so users can filter orders dynamically:
apps/koyo/app/[lang]/page.tsx

Accelerate with Insight

Now that we can filter our queries, let's extract meaningful insights from the data. Insight is a powerful feature that aggregates data across documents using MongoDB aggregation pipelines. Think of it like a kitchen display system that shows the chef exactly how many of each ingredient they need to prepare - total yogurt amount, number of each topping, etc.
First, define the Insight class in your constant file. Each field uses the accumulate option to specify how values should be aggregated:
apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts
Let's break down the aggregation patterns used:
🍦{ $sum: "$size" }
Sums up the size field from all matching orders. If 3 orders have sizes 50, 100, and 200, yogurtIcecreamQty will be 350.
🍓{ $cond: [{ $in: ["strawberry", "$toppings"] }, 1, 0] }
A conditional expression: if "strawberry" is in the toppings array, count 1; otherwise 0. The $sum aggregates these to get the total count.
Add dictionary entries for the insight fields to enable proper labeling in the UI:
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Now let's create a View component to display the aggregated insights in a beautiful dashboard layout:
apps/koyo/lib/icecreamOrder/IcecreamOrder.View.tsx
The View component displays each insight metric in a responsive grid. The chef can quickly see how much yogurt to prepare and which toppings are most popular.
Now create a Zone component that connects the View to the store. Zone components handle data fetching and state management:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Zone.tsx
Key feature of the Zone component:
🔗
st.slice[sliceName].use.icecreamOrderInsight(): Auto-generated hook that retrieves the aggregated insight data for the specified slice. The framework handles all the aggregation pipeline execution.
Finally, add the Insight Zone to your page to display real-time aggregated statistics:
apps/koyo/app/[lang]/page.tsx
Now when users filter orders by status, the insight dashboard automatically updates to show aggregated statistics for only those filtered orders. This is incredibly powerful for real-time operational decisions!
🎉 What You've Accomplished:
  • Created dynamic Query Makers with searchable parameters
  • Learned how to define Insight classes with MongoDB aggregation pipelines
  • Built View components to display aggregated statistics
  • Connected Zone components to auto-generated store hooks
  • Integrated insights with filtered queries for real-time analytics
In the next tutorial, we'll explore how to relate data between different models. This will allow you to create rich relationships like associating orders with customers, linking products to categories, and building complex data graphs.
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman