Querying the Graph

@joint/react is still powered by a native JointJS dia.Graph.

Most React code should stay on the higher-level setCell() helper from useGraph(). When you need lower-level graph queries or traversal, the same hook also gives you the raw JointJS graph instance.

Basic usage

Click any element below to highlight its neighborhood. The click handler reads the graph structure with native JointJS methods and then writes the highlight back through setCell, the same round-trip the When to reach for the raw graph section describes.

Open Sandbox

useGraph() hands back the raw dia.Graph alongside the setCell helper. From there, native JointJS methods such as getCell(), getNeighbors(), getConnectedLinks(), getElements(), and getLinks() are available directly on the instance.

const { graph } = useGraph();

const cell = graph.getCell(id);
if (cell?.isElement()) {
  const neighbors = graph.getNeighbors(cell);
  // ...derive something from the native graph structure
}

When to reach for the raw graph

Use the raw graph instance for graph-level operations the React hooks don't wrap:

• neighborhood queries: graph.getNeighbors(cell), graph.getConnectedLinks(cell)
• traversal: graph.getSuccessors(cell), graph.getPredecessors(cell)
• subgraph extraction: graph.getSubgraph(cells)
• batching multiple writes into a single graph event (graph.startBatch() / graph.stopBatch())
• one-off imperative lookups inside event handlers (graph.getCell(id), graph.getElements(), graph.getLinks())

These native methods are imperative, not React subscriptions. For the full surface, see the Graph API.

For everything else, prefer the React hooks:

• useCell(id) / useCells() to subscribe to cell state and re-render on change
• setCell(), removeCell(), removeCells(), resetCells(), updateCells() from useGraph() to write

The hooks keep React records and the native graph in sync. Mutating a cell through the raw graph instance bypasses that contract. If a native graph read leads to a record update, apply the update through setCell() rather than writing on the model directly.