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>
  )} />;
}