YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
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.
- options: The enum class itself. Select lists each status under its dictionary name (icecreamOrderStatus.<value>), and shows a value the dictionary does not name as it is.
Finally, add the Query Maker to your page so users can filter orders dynamically:
apps/koyo/page/_index.tsx
Accelerate with Insight
Now that we can filter our queries, let's aggregate the data. Insight counts documents across the current query and optional per-field query filters. Think of it like a kitchen display system that shows the chef exactly how many active orders or topping requests are waiting.
First, define the Insight class in your constant file. Each field uses the accumulate option as an Akan document query filter for counting:
apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts
Let's break down the count filter patterns used:
{}
Counts all orders that match the current query. Leave accumulate as an empty object for the base count.
{ toppings: "strawberry" }
Adds a field filter before counting. Because toppings is an array field, this counts orders whose toppings include "strawberry".
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 dashboard layout:
apps/koyo/lib/icecreamOrder/IcecreamOrder.View.tsx
The View component displays each insight metric in a responsive grid. The chef can see how many orders the current filter holds and how many of them asked for each topping.
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 features of the Zone component:
- st.slice[slice.sliceName].use.icecreamOrderInsight(): Auto-generated hook that reads the insight the slice loaded with its list, counted on the server for the slice's current query arguments.
- useInterval: Carried over from the slice tutorial, and still a plain 3-second poll - the insight is recounted on a timer, not pushed. A slice that declares .live() sends each change to its subscribers instead.
Finally, add the Insight Zone to your page to display the aggregated statistics:
apps/koyo/page/_index.tsx
When users filter orders by status, the insight dashboard automatically updates to show aggregated statistics for only those filtered orders.
In the next tutorial, we'll relate data between models: a Delivery that groups several ice cream orders so one driver can carry them together.