Load resources and assignments from REST backend

PRO

The functionality is available in PRO Edition only

When using resources and assignments with REST backend, it's necessary to handle loading the initial data, persisting assignment changes, and fetching assignments for each opened branch if tasks use lazy loading.

The examples below use RestDataProvider from @svar-ui/gantt-data-provider.

Load initial data

Pass { resources: true, assignments: true } to getData() on initial load. This issues four GET requests:

Request	Returns
`GET /tasks`	Task tree
`GET /links`	Task dependencies
`GET /resources`	Resource list
`GET /assignments`	All assignments

import { useState, useEffect } from "react";
import { Gantt } from "@svar/react-gantt";
import { RestDataProvider } from "@svar-ui/gantt-data-provider";

const restProvider = new RestDataProvider("https://your-backend-url");

function App() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const [resources, setResources] = useState([]);
  const [assignments, setAssignments] = useState([]);

  useEffect(() => {
    restProvider
      .getData(undefined, { resources: true, assignments: true })
      .then(({ tasks: t, links: l, resources: r, assignments: a }) => {
        setTasks(t);
        setLinks(l);
        setResources(r);
        setAssignments(a);
      });
  }, []);

  return <Gantt tasks={tasks} links={links} resources={resources} assignments={assignments} />;
}

export default App;

Persist assignment changes

Connect the provider to the Gantt API via api.setNext() inside the init callback. The provider then listens to assignment actions and sends the matching REST requests automatically:

Action	REST request
`add-assignment`	`POST /assignments`
`update-assignment`	`PUT /assignments/{id}`
`delete-assignment`	`DELETE /assignments/{id}`

function init(api) {
  api.setNext(restProvider);
}

<Gantt init={init} tasks={tasks} links={links} resources={resources} assignments={assignments} />

Lazy loading

When tasks use lazy: true (see Dynamic data loading), the request-data handler must also fetch the assignments that belong to the loaded branch. Pass { assignments: true } to getData() with the branch id. This adds GET /assignments/{taskId} request scoped to that branch. Call api.exec("provide-data") inside the callback to deliver the loaded data back to Gantt:

function init(api) {
  api.setNext(restProvider);

  api.on("request-data", ev => {
    restProvider
      .getData(ev.id, { assignments: true })
      .then(({ tasks, links, assignments }) => {
        api.exec("provide-data", {
          id: ev.id,
          data: { tasks, links, assignments },
        });
      });
  });
}

Related sample:

Resources backend

Related articles:

Load initial data​

Persist assignment changes​

Lazy loading​

Load initial data

Persist assignment changes

Lazy loading