PalmyraTreeStore#
@palmyralabs/palmyra-wire · PalmyraTreeStore implements TreeQueryStore<IChildTreeRequest, any>
Overview#
Hierarchical store for tree-shaped data — menu systems, organisation charts, category trees. Every request sends header action: 'nativeQuery'; the backend decides how to serve it (typically a recursive CTE or a parent_id index).
Obtain via factory.getTreeStore(...).
Types#
interface IChildTreeRequest {
parent?: number; // id of the parent node; omitted for root
}Constructor#
new PalmyraTreeStore(
baseUrl: string,
endPoint: IEndPoint,
options: StoreOptions,
factory?: APIErrorHandlerFactory,
idProperty?: strings,
)Methods#
| Method | Signature |
|---|---|
getRoot |
getRoot(options?: AbstractHandler): Promise<any> — returns the root level |
getChildren |
getChildren(data: IChildTreeRequest, options?: AbstractHandler): Promise<QueryResponse<any>> — filters by parent id |
query |
query(request: QueryRequest): Promise<QueryResponse<any>> — raw GET with action: 'nativeQuery' header |
getClient |
inherited |
Example#
Lazy-load a tree one level at a time (Mantine-flavoured):
import { useEffect, useState } from 'react';
import { Tree, RenderTreeNodePayload } from '@mantine/core';
import AppStoreFactory from './wire/StoreFactory';
type Node = { id: number; name: string; children?: Node[] };
export function CategoryTree() {
const store = AppStoreFactory.getTreeStore({}, '/mstCategory');
const [roots, setRoots] = useState<Node[]>([]);
useEffect(() => { store.getRoot().then(setRoots); }, []);
const expand = async (node: Node) => {
const { result } = await store.getChildren({ parent: node.id });
node.children = result;
setRoots(prev => [...prev]); // trigger re-render; in real code use immer or a normalised store
};
return <Tree data={roots as any} renderNode={({ node, ...p }: RenderTreeNodePayload) => (
<div onClick={() => expand(node as any as Node)}>{(node as any).name}</div>
)} />;
}