@eventcatalog/core 2.9.1 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.10.1
+
+### Patch Changes
+
+- e2c99e7: fix(core): fixed issue adding additional properties to users frontmatter on build
+
+## 2.10.0
+
+### Minor Changes
+
+- aa2090b: feat(core): added support for query message types/resources
+
 ## 2.9.1
 
 ### Patch Changes

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.9.1",
+  "version": "2.10.1",
   "publishConfig": {
     "access": "public"
   },
@@ -66,6 +66,7 @@
     "diff": "^7.0.0",
     "diff2html": "^3.4.48",
     "glob": "^10.4.1",
+    "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
     "lodash.merge": "4.6.2",
     "mermaid": "^10.9.1",
@@ -75,12 +76,12 @@
     "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
+    "rimraf": "^5.0.7",
     "semver": "7.6.3",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
-    "uuid": "^10.0.0",
-    "rimraf": "^5.0.7"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.5",

package/scripts/catalog-to-astro-content-directory.js

@@ -41,7 +41,7 @@ const copyFiles = async (source, target) => {
 
 const ensureAstroCollectionNotEmpty = async (astroDir) => {
   // TODO: maybe import collections from `src/content/config.ts`...
-  const COLLECTIONS = ['events', 'commands', 'services', 'users', 'teams', 'domains', 'flows', 'pages', 'changelogs'];
+  const COLLECTIONS = ['events', 'commands', 'services', 'users', 'teams', 'domains', 'flows', 'pages', 'changelogs', 'queries'];
 
   // Check empty collections
   const emptyCollections = [];
@@ -69,8 +69,6 @@ const ensureAstroCollectionNotEmpty = async (astroDir) => {
 export const catalogToAstro = async (source, astroDir) => {
   const astroContentDir = path.join(astroDir, 'src/content/');
 
-  console.log(path.join(astroContentDir, 'config.ts'));
-
   // Config file
   const astroConfigFile = fs.readFileSync(path.join(astroContentDir, 'config.ts'));
 

package/scripts/default-files-for-collections/queries.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/eventcatalog-config-file-utils.js

@@ -4,6 +4,7 @@ import { copyFile } from 'node:fs/promises';
 import path from 'node:path';
 import { v4 as uuidV4 } from 'uuid';
 import { pathToFileURL } from 'url';
+import matter from 'gray-matter';
 
 export async function cleanup(projectDirectory) {
   const filePath = path.join(projectDirectory, 'eventcatalog.config.mjs');
@@ -82,19 +83,7 @@ export const verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirector
 };
 
 export function addPropertyToFrontMatter(input, newProperty, newValue) {
-  // Split the input into front matter and content
-  const [_, frontMatter, content] = input.split('---');
+  const file = matter(input);
 
-  // Parse the front matter
-  const frontMatterLines = frontMatter.trim().split('\n');
-  const updatedFrontMatterLines = [...frontMatterLines];
-
-  // Add the new property
-  updatedFrontMatterLines.push(`${newProperty}: ${newValue}`);
-
-  // Reconstruct the updated input
-  const updatedFrontMatter = updatedFrontMatterLines.join('\n');
-  const updatedInput = `---\n${updatedFrontMatter}\n---\n${content.trim()}`;
-
-  return updatedInput;
+  return matter.stringify(file.content, { ...file.data, [newProperty]: newValue });
 }

package/scripts/map-catalog-to-astro.js

@@ -1,6 +1,17 @@
 import path from 'node:path';
 
-const COLLECTION_KEYS = ['events', 'commands', 'services', 'users', 'teams', 'domains', 'flows', 'pages', 'changelogs'];
+const COLLECTION_KEYS = [
+  'events',
+  'commands',
+  'services',
+  'users',
+  'teams',
+  'domains',
+  'flows',
+  'pages',
+  'changelogs',
+  'queries',
+];
 
 /**
  * @typedef {Object} MapCatalogToAstroParams

package/src/components/DiscoverInsight.astro

@@ -6,7 +6,7 @@ interface Props {
   color: string;
   dataTarget: number;
   icon: React.ElementType;
-  label: 'domains' | 'services' | 'commands' | 'events' | 'flows';
+  label: 'domains' | 'services' | 'commands' | 'queries' | 'events' | 'flows';
 }
 
 const { color, dataTarget, icon: Icon, label } = Astro.props;

package/src/components/DocsNavigation.astro

@@ -8,16 +8,18 @@ import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
 import config, { type CatalogConfig } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
+import { getQueries } from '@utils/queries';
 
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
+const queries = await getQueries({ getAllVersions: false });
 const services = await getServices({ getAllVersions: false });
 const domains = await getDomains({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
 const teams = await getTeams();
 const users = await getUsers();
 
-const messages = [...events, ...commands];
+const messages = [...events, ...commands, ...queries];
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
 const allData = [...domains, ...services, ...messages, ...flows, ...teams, ...users];

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -3,6 +3,7 @@ import NodeGraphNew from './NodeGraph';
 import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/services/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForQueries } from '@utils/queries/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
 
@@ -57,6 +58,17 @@ if (collection === 'commands') {
   edges = eventEdges;
 }
 
+if (collection === 'queries') {
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForQueries({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
+
 if (collection === 'domains') {
   const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForDomain({
     id: id,

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -15,6 +15,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
+import QueryNode from './Nodes/Query';
 import UserNode from './Nodes/User';
 import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
@@ -57,6 +58,7 @@ const NodeGraphBuilder = ({
     () => ({
       services: ServiceNode,
       events: EventNode,
+      queries: QueryNode,
       commands: CommandNode,
       step: StepNode,
       user: UserNode,
@@ -160,21 +162,25 @@ const NodeGraphBuilder = ({
       {includeBackground && <Controls />}
       {includeKey && (
         <Panel position="bottom-right">
-          <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
-            <span className="font-bold">Key</span>
-            <ul>
-              <li className="flex space-x-2 items-center text-[12px]">
+          <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
+            {/* <span className="font-bold">Key</span> */}
+            <ul className="m-0 p-0">
+              <li className="flex space-x-2 items-center text-[10px]">
                 <span className="w-2 h-2 bg-orange-500 block" />
                 <span className="block">Event</span>
               </li>
-              <li className="flex space-x-2 items-center text-[12px]">
+              <li className="flex space-x-2 items-center text-[10px]">
                 <span className="w-2 h-2 bg-pink-500 block" />
                 <span className="block">Service</span>
               </li>
-              <li className="flex space-x-2 items-center text-[12px]">
+              <li className="flex space-x-2 items-center text-[10px]">
                 <span className="w-2 h-2 bg-blue-500 block" />
                 <span className="block">Command</span>
               </li>
+              <li className="flex space-x-2 items-center text-[10px]">
+                <span className="w-2 h-2 bg-green-500 block" />
+                <span className="block">Query</span>
+              </li>
             </ul>
           </div>
         </Panel>

package/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -0,0 +1,74 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  message: CollectionEntry<'queries'>;
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function QueryNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, message, showTarget = true, showSource = true } = data as Data;
+
+  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+
+  const renderTarget = showTarget || (targetPosition && producers.length > 0);
+  const renderSource = showSource || (sourcePosition && consumers.length > 0);
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-green-500 to-green-700 relative flex items-center w-5 justify-center rounded-l-sm text-green-100-500',
+          `border-r-[1px] border-green-500`
+        )}
+      >
+        <MagnifyingGlassIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Query
+          </span>
+        )}
+      </div>
+      <div className="p-1 min-w-60 max-w-[min-content]">
+        {renderTarget && <Handle type="target" position={targetPosition} />}
+        {renderSource && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <span className="text-xs font-bold block pb-0.5">{name}</span>
+          <div className="flex justify-between">
+            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
+          </div>
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-3 py-1">
+              <span className="text-[8px] font-light">{summary}</span>
+            </div>
+            <div className="grid grid-cols-2 gap-x-4 py-1">
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Producers: {producers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Consumers: {consumers.length}
+              </span>
+              <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                Owners: {owners.length}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/SideBars/MessageSideBar.astro

@@ -38,7 +38,38 @@ const ownersList = owners.map((o) => ({
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
-const type = message.collection.slice(0, -1);
+const getType = (type: string) => {
+  switch (type) {
+    case 'queries':
+      return 'Query';
+    default:
+      return message.collection.slice(0, -1);
+  }
+};
+
+const getProducerEmptyMessage = (type: string) => {
+  const value = type.toLowerCase();
+  switch (value) {
+    case 'query':
+    case 'command':
+      return `This ${value} does not get invoked by any services.`;
+    default:
+      return `This ${value} does not get produced by any services.`;
+  }
+};
+
+const getConsumerEmptyMessage = (type: string) => {
+  const value = type.toLowerCase();
+  switch (value) {
+    case 'query':
+    case 'command':
+      return `This ${value} does not invoke any service.`;
+    default:
+      return `This ${value} does not get consumed by any services.`;
+  }
+};
+
+const type = getType(message.collection);
 
 // @ts-ignore
 const publicPath = message?.catalog?.publicPath;
@@ -52,14 +83,14 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       color="pink"
       title={`${type} Producers (${producerList.length})`}
       pills={producerList}
-      emptyMessage={`This ${type} does not get produced by any services.`}
+      emptyMessage={getProducerEmptyMessage(type)}
       client:load
     />
     <PillList
       color="pink"
       title={`${type} Consumers (${consumerList.length})`}
       pills={consumerList}
-      emptyMessage={`This ${type} does not get consumed by any services.`}
+      emptyMessage={getConsumerEmptyMessage(type)}
       client:load
     />
     <OwnersList

package/src/components/Tables/columns/MessageTableColumns.tsx

@@ -1,4 +1,4 @@
-import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
@@ -8,6 +8,20 @@ import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
+export const getColorAndIconForMessageType = (type: string) => {
+  switch (type) {
+    case 'event':
+      return { color: 'orange', Icon: BoltIcon };
+    case 'command':
+      return { color: 'blue', Icon: ChatBubbleLeftIcon };
+    case 'querie':
+    case 'query':
+      return { color: 'green', Icon: MagnifyingGlassIcon };
+    default:
+      return { color: 'gray', Icon: ChatBubbleLeftIcon };
+  }
+};
+
 export const columns = () => [
   columnHelper.accessor('data.name', {
     id: 'name',
@@ -15,8 +29,7 @@ export const columns = () => [
     cell: (info) => {
       const messageRaw = info.row.original;
       const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
-      const color = type === 'event' ? 'orange' : 'blue';
-      const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
+      const { color, Icon } = getColorAndIconForMessageType(type);
       return (
         <div className=" group ">
           <a

package/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -4,6 +4,7 @@ import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { getColorAndIconForMessageType } from './MessageTableColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -13,7 +14,6 @@ export const columns = () => [
     header: () => <span>Service</span>,
     cell: (info) => {
       const messageRaw = info.row.original;
-      const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
       const color = 'pink';
       return (
         <div className="group font-light">
@@ -73,8 +73,7 @@ export const columns = () => [
         <ul>
           {receives.map((consumer: any) => {
             const type = consumer.collection.slice(0, -1);
-            const color = type === 'event' ? 'orange' : 'blue';
-            const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
+            const { color, Icon } = useMemo(() => getColorAndIconForMessageType(type), [type]);
             return (
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a

package/src/components/Tables/columns/index.tsx

@@ -7,6 +7,7 @@ export const getColumnsByCollection = (collection: string): any => {
   switch (collection) {
     case 'events':
     case 'commands':
+    case 'queries':
       return MessageTableColumns();
     case 'services':
       return ServiceTableColumns();

package/src/content/config.ts

@@ -150,6 +150,16 @@ const commands = defineCollection({
     .merge(baseSchema),
 });
 
+const queries = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      producers: z.array(reference('services')).optional(),
+      consumers: z.array(reference('services')).optional(),
+    })
+    .merge(baseSchema),
+});
+
 const services = defineCollection({
   type: 'content',
   schema: z
@@ -207,6 +217,7 @@ const teams = defineCollection({
 export const collections = {
   events,
   commands,
+  queries,
   services,
   users,
   teams,

package/src/layouts/DiscoverLayout.astro

@@ -9,8 +9,11 @@ import { getFlows } from '@utils/flows/flows';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
+import { getQueries } from '@utils/queries';
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 
 const events = await getEvents();
+const queries = await getQueries();
 const commands = await getCommands();
 const services = await getServices();
 const domains = await getDomains();
@@ -36,6 +39,14 @@ const tabs = [
     activeColor: 'blue',
     enabled: commands.length > 0,
   },
+  {
+    label: `Queries (${queries.length})`,
+    href: buildUrl('/discover/queries'),
+    isActive: currentPath === '/discover/queries',
+    icon: MagnifyingGlassIcon,
+    activeColor: 'green',
+    enabled: queries.length > 0,
+  },
   {
     label: `Services (${services.length})`,
     href: buildUrl('/discover/services'),

package/src/layouts/VisualiserLayout.astro

@@ -5,20 +5,22 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getFlows } from '@utils/flows/flows';
+import { getQueries } from '@utils/queries';
 import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
 import { ViewTransitions } from 'astro:transitions';
 
-const [services, events, commands, domains, flows] = await Promise.all([
+const [services, events, commands, queries, domains, flows] = await Promise.all([
   getServices(),
   getEvents(),
   getCommands(),
+  getQueries(),
   getDomains(),
   getFlows(),
 ]);
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const navItems = [...domains, ...services, ...events, ...commands, ...flows];
+const navItems = [...domains, ...services, ...events, ...commands, ...queries, ...flows];
 
 const navigation = navItems
   .filter((item) => item.data.version === item.data.latestVersion)
@@ -41,6 +43,8 @@ const getColor = (collection: string) => {
       return 'green';
     case 'events':
       return 'red';
+    case 'queries':
+      return 'green';
     case 'commands':
       return 'yellow';
     case 'domains':
@@ -52,45 +56,47 @@ const getColor = (collection: string) => {
 ---
 
 <PlainPage title={title} description={description}>
-  <div class="flex min-h-full flex-row md:flex-col">
-    <div class="mx-auto flex flex-col-reverse md:flex-row w-full items-start">
-      <div>
-        <aside
-          class="md:sticky mt-8 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10"
-          id="visualiser-navigation"
-        >
-          {
-            Object.keys(navigation).map((key: any) => {
-              const items = navigation[key]
-                .map((item: any) => {
-                  const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
-                  const isLatest = item.data.version === item.data.latestVersion;
-                  if (!isLatest) return null;
-                  return {
-                    label: item.data.name,
-                    version: item.data.version,
-                    color: getColor(item.collection),
-                    href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
-                    active: isCurrent,
-                  };
-                })
-                .filter((n: any) => n !== null);
-              return (
-                <BasicList
-                  title={`${key} (${navigation[key].length})`}
-                  items={items}
-                  emptyMessage="Nothing to show"
-                  color="gray"
-                  client:load
-                />
-              );
-            })
-          }
+  <div class="">
+    <div class="">
+      <div class="hidden md:block">
+        <aside class="sm:fixed grow w-56 xl:w-[19em] overflow-y-auto h-full z-10 pb-20" id="visualiser-navigation">
+          <div class="w-full">
+            <div class="sticky top-0 z-10 h-8 pointer-events-none -mt-7">
+              <div class="h-full bg-gradient-to-b from-white to-transparent"></div>
+            </div>
+            {
+              Object.keys(navigation).map((key: any) => {
+                const items = navigation[key]
+                  .map((item: any) => {
+                    const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
+                    const isLatest = item.data.version === item.data.latestVersion;
+                    if (!isLatest) return null;
+                    return {
+                      label: item.data.name,
+                      version: item.data.version,
+                      color: getColor(item.collection),
+                      href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
+                      active: isCurrent,
+                    };
+                  })
+                  .filter((n: any) => n !== null);
+                return (
+                  <BasicList
+                    title={`${key} (${navigation[key].length})`}
+                    items={items}
+                    emptyMessage="Nothing to show"
+                    color="gray"
+                    client:load
+                  />
+                );
+              })
+            }
+          </div>
         </aside>
       </div>
 
-      <main class="flex-1 h-full w-full relative">
-        <button
+      <main class="flex-1 h-full w-full relative sm:pl-60 xl:pl-80">
+        <!-- <button
           id="fullscreen-toggle"
           class="absolute top-[1em] z-40 left-5 bg-white hover:bg-gray-100/50 border border-gray-200 hover:text-primary text-gray-800 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out flex items-center space-x-2 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         >
@@ -102,7 +108,7 @@ const getColor = (collection: string) => {
               d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
           </svg>
           <span>Toggle Fullscreen</span>
-        </button>
+        </button> -->
         <slot />
       </main>
     </div>

package/src/pages/discover/[type]/index.astro

@@ -12,7 +12,7 @@ export async function getStaticPaths() {
     flows: getFlows,
   };
 
-  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
   const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
   return allItems.flatMap((items, index) => ({

package/src/pages/docs/[type]/[id]/[version]/asyncapi/index.astro

@@ -16,7 +16,7 @@ import { pageDataLoader } from '@utils/pages/pages';
 import type { CollectionEntry } from 'astro:content';
 
 export async function getStaticPaths() {
-  const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
+  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
   const hasAsyncAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.asyncapiPath !== undefined;

package/src/pages/docs/[type]/[id]/[version]/changelog/index.astro

@@ -4,7 +4,7 @@ import Footer from '@layouts/Footer.astro';
 
 import type { PageTypes } from '@types';
 import { getChangeLogs } from '@utils/changelogs/changelogs';
-import { RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
+import { RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { pageDataLoader } from '@utils/pages/pages';
 import 'diff2html/bundles/css/diff2html.min.css';
 
@@ -13,7 +13,7 @@ import { getVersions, getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/collections/file-diffs';
 
 export async function getStaticPaths() {
-  const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
+  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
   return allItems.flatMap((items, index) =>
@@ -85,6 +85,9 @@ const getBadge = () => {
   if (props.collection === 'commands') {
     return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-400' };
   }
+  if (props.collection === 'queries') {
+    return { backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-blue-400' };
+  }
   if (props.collection === 'domains') {
     return {
       backgroundColor: 'yellow',

package/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -26,7 +26,7 @@ export async function getStaticPaths() {
     flows: getFlows,
   };
 
-  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
   const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
   return allItems.flatMap((items, index) =>
@@ -206,7 +206,11 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
     </main>
     <aside class="hidden lg:block sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
       <!-- @ts-ignore -->
-      {(props?.collection === 'events' || props.collection === 'commands') && <MessageSideBar message={props} />}
+      {
+        (props?.collection === 'events' || props.collection === 'commands' || props.collection === 'queries') && (
+          <MessageSideBar message={props} />
+        )
+      }
       {props?.collection === 'services' && <ServiceSideBar service={props} />}
       {props?.collection === 'domains' && <DomainSideBar domain={props} />}
     </aside>

package/src/pages/docs/[type]/[id]/[version]/spec/index.astro

@@ -10,7 +10,7 @@ import { buildUrl } from '@utils/url-builder';
 import { pageDataLoader } from '@utils/pages/pages';
 
 export async function getStaticPaths() {
-  const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
+  const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
 
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 

package/src/pages/index.astro

@@ -2,7 +2,14 @@
 import Footer from '@layouts/Footer.astro';
 import PlainPage from '@layouts/PlainPage.astro';
 import { buildUrl } from '@utils/url-builder';
-import { BoltIcon, ChatBubbleLeftIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import {
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  QueueListIcon,
+  RectangleGroupIcon,
+  ServerIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
 
 import { getMessages } from '@utils/messages';
 import { getDomains } from '@utils/domains/domains';
@@ -10,7 +17,7 @@ import { getServices } from '@utils/services/services';
 import { getFlows } from '@utils/flows/flows';
 import DiscoverInsight from '@components/DiscoverInsight.astro';
 
-const { commands = [], events = [] } = await getMessages();
+const { commands = [], events = [], queries = [] } = await getMessages();
 const domains = await getDomains();
 const services = await getServices();
 const flows = await getFlows();
@@ -30,13 +37,15 @@ const flows = await getFlows();
       <div class="hidden md:block">
         <h2 class="text-center text-xl font-bold">Architecture insights</h2>
         <section class="mb-16 bg-white rounded-xl shadow-lg p-6">
-          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
             <DiscoverInsight color="text-yellow-600" dataTarget={domains.length} icon={RectangleGroupIcon} label="domains" />
 
             <DiscoverInsight color="text-pink-500" dataTarget={services.length} icon={ServerIcon} label="services" />
 
             <DiscoverInsight color="text-blue-500" dataTarget={commands.length} icon={ChatBubbleLeftIcon} label="commands" />
 
+            <DiscoverInsight color="text-green-500" dataTarget={queries.length} icon={MagnifyingGlassIcon} label="queries" />
+
             <DiscoverInsight color="text-orange-400" dataTarget={events.length} icon={BoltIcon} label="events" />
 
             <DiscoverInsight color="text-green-800" dataTarget={flows.length} icon={QueueListIcon} label="flows" />

package/src/pages/visualiser/[type]/[id]/[version]/index.astro

@@ -14,7 +14,7 @@ export async function getStaticPaths() {
     flows: getFlows,
   };
 
-  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows'];
   const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
   return allItems.flatMap((items, index) =>

package/src/types/index.ts

@@ -1,4 +1,4 @@
-export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services' | 'flows';
-export type CollectionMessageTypes = 'commands' | 'events';
+export type CollectionTypes = 'commands' | 'events' | 'queries' | 'domains' | 'services' | 'flows';
+export type CollectionMessageTypes = 'commands' | 'events' | 'queries';
 
-export type PageTypes = 'events' | 'commands' | 'services' | 'domains';
+export type PageTypes = 'events' | 'commands' | 'queries' | 'services' | 'domains';

package/src/utils/flows/node-graph.ts

@@ -25,7 +25,7 @@ const getServiceNode = (step: any, services: CollectionEntry<'services'>[]) => {
   };
 };
 
-const getMessageNode = (step: any, messages: CollectionEntry<'events' | 'commands'>[]) => {
+const getMessageNode = (step: any, messages: CollectionEntry<'events' | 'commands' | 'queries'>[]) => {
   const messagesForVersion = getItemsFromCollectionByIdAndSemverOrLatest(messages, step.message.id, step.message.version);
   const message = messagesForVersion[0];
   return {
@@ -53,9 +53,10 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
 
   const events = await getCollection('events');
   const commands = await getCollection('commands');
+  const queries = await getCollection('queries');
   const services = await getCollection('services');
 
-  const messages = [...events, ...commands];
+  const messages = [...events, ...commands, ...queries];
 
   const steps = flow?.data.steps || [];
 
@@ -69,7 +70,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   // Create nodes
-  hydratedSteps.forEach((step, index: number) => {
+  hydratedSteps.forEach((step: any, index: number) => {
     const node = {
       id: `step-${step.id}`,
       sourcePosition: 'right',
@@ -93,7 +94,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   // Create Edges
-  hydratedSteps.forEach((step, index: number) => {
+  hydratedSteps.forEach((step: any, index: number) => {
     let paths = step.next_steps || [];
 
     if (step.next_step) {

package/src/utils/messages.ts

@@ -1,6 +1,7 @@
 // Exporting getCommands and getEvents directly
 import { getCommands } from '@utils/commands';
 import { getEvents } from '@utils/events';
+import { getQueries } from './queries';
 export { getCommands } from '@utils/commands';
 export { getEvents } from '@utils/events';
 
@@ -8,6 +9,7 @@ export { getEvents } from '@utils/events';
 export const getMessages = async () => {
   const commands = await getCommands();
   const events = await getEvents();
+  const queries = await getQueries();
 
-  return { commands, events };
+  return { commands, events, queries };
 };

package/src/utils/node-graph-utils/utils.ts

@@ -2,13 +2,13 @@ import type { CollectionEntry } from 'astro:content';
 import type { Node } from 'reactflow';
 import dagre from 'dagre';
 
-export const generateIdForNode = (node: CollectionEntry<'events' | 'services' | 'commands'>) => {
+export const generateIdForNode = (node: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>) => {
   return `${node.data.id}-${node.data.version}`;
 };
 
 export const generatedIdForEdge = (
-  source: CollectionEntry<'events' | 'services' | 'commands'>,
-  target: CollectionEntry<'events' | 'services' | 'commands'>
+  source: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>,
+  target: CollectionEntry<'events' | 'services' | 'commands' | 'queries'>
 ) => {
   return `${source.data.id}-${source.data.version}-${target.data.id}-${target.data.version}`;
 };

package/src/utils/pages/pages.ts

@@ -1,12 +1,14 @@
 import type { CollectionTypes, PageTypes } from '@types';
 import { getDomains } from '@utils/domains/domains';
 import { getCommands, getEvents } from '@utils/messages';
+import { getQueries } from '@utils/queries';
 import { getServices } from '@utils/services/services';
 import type { CollectionEntry } from 'astro:content';
 
 export const pageDataLoader: Record<PageTypes, () => Promise<CollectionEntry<CollectionTypes>[]>> = {
   events: getEvents,
   commands: getCommands,
+  queries: getQueries,
   services: getServices,
   domains: getDomains,
 };

package/src/utils/queries/node-graph.ts

@@ -0,0 +1,118 @@
+import { getQueries } from '@utils/queries';
+import type { CollectionEntry } from 'astro:content';
+import dagre from 'dagre';
+import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
+import { MarkerType } from 'reactflow';
+
+type DagreGraph = any;
+
+interface Props {
+  id: string;
+  version: string;
+  defaultFlow?: DagreGraph;
+  mode?: 'simple' | 'full';
+}
+
+export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
+  const nodes = [] as any,
+    edges = [] as any;
+
+  const queries = await getQueries();
+
+  const query = queries.find((query) => query.data.id === id && query.data.version === version);
+
+  // Nothing found...
+  if (!query) {
+    return {
+      nodes: [],
+      edges: [],
+    };
+  }
+
+  const producers = (query.data.producers as CollectionEntry<'services'>[]) || [];
+  const consumers = (query.data.consumers as CollectionEntry<'services'>[]) || [];
+
+  if (producers && producers.length > 0) {
+    producers.forEach((producer) => {
+      nodes.push({
+        id: generateIdForNode(producer),
+        type: producer?.collection,
+        sourcePosition: 'right',
+        targetPosition: 'left',
+        data: { mode, service: producer, showTarget: false },
+        position: { x: 250, y: 0 },
+      });
+      edges.push({
+        id: generatedIdForEdge(producer, query),
+        source: generateIdForNode(producer),
+        target: generateIdForNode(query),
+        type: 'smoothstep',
+        label: 'requests',
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
+        },
+      });
+    });
+  }
+
+  // The query itself
+  nodes.push({
+    id: generateIdForNode(query),
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { mode, message: query, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    position: { x: 0, y: 0 },
+    type: query.collection,
+  });
+
+  // The messages the service sends
+  consumers.forEach((consumer) => {
+    nodes.push({
+      id: generateIdForNode(consumer),
+      sourcePosition: 'right',
+      targetPosition: 'left',
+      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      position: { x: 0, y: 0 },
+      type: consumer?.collection,
+    });
+    edges.push({
+      id: generatedIdForEdge(query, consumer),
+      source: generateIdForNode(query),
+      target: generateIdForNode(consumer),
+      type: 'smoothstep',
+      label: 'accepts',
+      animated: false,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 40,
+        height: 40,
+      },
+      style: {
+        strokeWidth: 1,
+      },
+    });
+  });
+
+  nodes.forEach((node: any) => {
+    flow.setNode(node.id, { width: 150, height: 100 });
+  });
+
+  edges.forEach((edge: any) => {
+    flow.setEdge(edge.source, edge.target);
+  });
+
+  // Render the diagram in memory getting hte X and Y
+  dagre.layout(flow);
+
+  return {
+    nodes: calculatedNodes(flow, nodes),
+    edges: edges,
+  };
+};

package/src/utils/queries.ts

@@ -0,0 +1,65 @@
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import path from 'path';
+import { getVersionForCollectionItem, satisfies } from './collections/util';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
+
+type Query = CollectionEntry<'queries'> & {
+  catalog: {
+    path: string;
+    filePath: string;
+    type: string;
+  };
+};
+
+interface Props {
+  getAllVersions?: boolean;
+}
+
+export const getQueries = async ({ getAllVersions = true }: Props = {}): Promise<Query[]> => {
+  const queries = await getCollection('queries', (query) => {
+    return (getAllVersions || !query.slug.includes('versioned')) && query.data.hidden !== true;
+  });
+
+  const services = await getCollection('services');
+
+  return queries.map((query) => {
+    const { latestVersion, versions } = getVersionForCollectionItem(query, queries);
+
+    const producers = services.filter((service) =>
+      service.data.sends?.some((item) => {
+        if (item.id != query.data.id) return false;
+        if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
+        return satisfies(query.data.version, item.version);
+      })
+    );
+
+    const consumers = services.filter((service) =>
+      service.data.receives?.some((item) => {
+        if (item.id != query.data.id) return false;
+        if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
+        return satisfies(query.data.version, item.version);
+      })
+    );
+
+    return {
+      ...query,
+      data: {
+        ...query.data,
+        producers,
+        consumers,
+        versions,
+        latestVersion,
+      },
+      catalog: {
+        path: path.join(query.collection, query.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, query.collection, query.id.replace('/index.mdx', '/index.md')),
+        astroContentFilePath: path.join(process.cwd(), 'src', 'content', query.collection, query.id),
+        filePath: path.join(process.cwd(), 'src', 'catalog-files', query.collection, query.id.replace('/index.mdx', '')),
+        publicPath: path.join('/generated', query.collection, query.id.replace('/index.mdx', '')),
+        type: 'event',
+      },
+    };
+  });
+};

package/src/utils/services/node-graph.ts

@@ -14,6 +14,31 @@ interface Props {
   renderAllEdges?: boolean;
 }
 
+const getSendsMessageByMessageType = (messageType: string) => {
+  switch (messageType) {
+    case 'events':
+      return 'publishes event';
+    case 'commands':
+      return 'invokes command';
+    case 'queries':
+      return 'requests';
+    default:
+      return 'invokes message';
+  }
+};
+
+const getReceivesMessageByMessageType = (messageType: string) => {
+  switch (messageType) {
+    case 'events':
+      return 'receives event';
+    case 'commands':
+    case 'queries':
+      return 'accepts';
+    default:
+      return 'accepts message';
+  }
+};
+
 export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
   const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
@@ -36,8 +61,9 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
 
   const events = await getCollection('events');
   const commands = await getCollection('commands');
+  const queries = await getCollection('queries');
 
-  const messages = [...events, ...commands];
+  const messages = [...events, ...commands, ...queries];
 
   const receivesHydrated = receivesRaw
     .map((message) => getItemsFromCollectionByIdAndSemverOrLatest(messages, message.id, message.version))
@@ -49,8 +75,8 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     .flat()
     .filter((e) => e !== undefined);
 
-  const receives = (receivesHydrated as CollectionEntry<'events' | 'commands'>[]) || [];
-  const sends = (sendsHydrated as CollectionEntry<'events' | 'commands'>[]) || [];
+  const receives = (receivesHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
+  const sends = (sendsHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
 
   // Get all the data from them
 
@@ -70,7 +96,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         source: generateIdForNode(receive),
         target: generateIdForNode(service),
         type: 'smoothstep',
-        label: receive?.collection === 'events' ? 'receives event' : 'accepts',
+        label: getReceivesMessageByMessageType(receive?.collection),
         animated: false,
         markerEnd: {
           type: MarkerType.ArrowClosed,
@@ -109,7 +135,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
       source: generateIdForNode(service),
       target: generateIdForNode(send),
       type: 'smoothstep',
-      label: send?.collection === 'events' ? 'publishes event' : 'invokes command',
+      label: getSendsMessageByMessageType(send?.collection),
       animated: false,
       markerEnd: {
         type: MarkerType.ArrowClosed,

package/src/utils/services/services.ts

@@ -18,8 +18,9 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
   });
   const events = await getCollection('events');
   const commands = await getCollection('commands');
+  const queries = await getCollection('queries');
 
-  const allMessages = [...events, ...commands];
+  const allMessages = [...events, ...commands, ...queries];
 
   // @ts-ignore // TODO: Fix this type
   return services.map((service) => {
@@ -29,14 +30,14 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
     const receivesMessages = service.data.receives || [];
 
     const sends = sendsMessages
-      .map((message) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
+      .map((message: any) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
       .flat()
-      .filter((e) => e !== undefined);
+      .filter((e: any) => e !== undefined);
 
     const receives = receivesMessages
-      .map((message) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
+      .map((message: any) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
       .flat()
-      .filter((e) => e !== undefined);
+      .filter((e: any) => e !== undefined);
 
     return {
       ...service,