Skip to main content

Working with server

The Gantt library allows working both with the client and server data. The widget doesn't impose any special requirements on the backend. It can be easily connected with any backend platform.

You are free to create your custom server script or if you want to use the ready-made built-in backend, you can find the needed script in the following repository: Go backend

RestDataProvider​

To automate the process of working with the server, you can use the ready-made helper which is the RestDataProvider service.

The RestDataProvider service:

  • listens to the following actions and sends REST requests (via its send() method) to perform the corresponding data operations on the backend:

  • "add-task"

  • "update-task"

  • "delete-task"

  • "add-link"

  • "update-link"

  • "delete-link"

  • "move-task"

  • "copy-task"

  • provides a special method for loading data: getData() gets a promise with tasks and links data

  • offers the debounce functionality to avoid excessive server requests

Connecting RestDataProvider to the backend​

To connect RestDataProvider to the backend, you need to import the RestDataProvider component from wx-gantt-data-provider, and then create an instance by providing the path to your server in the constructor. You should also include RestDataProvider into the Event Bus order via the api.setNext() method to send the corresponding requests to the server. To load data, apply the getData method.

import React, { useEffect, useRef, useState } from 'react';
import { Gantt } from 'wx-react-gantt';
import { RestDataProvider } from 'wx-gantt-data-provider';

const url = "https://some_backend_url";

const server = new RestDataProvider(url);

const MyComponent = () => {
    const [tasks, setTasks] = useState([]);
    const [links, setLinks] = useState([]);
    const apiRef = useRef(null);

    useEffect(() => {
        server.getData().then(data => {
            setTasks(data.tasks);
            setLinks(data.links);
        });
    }, []);

    useEffect(() => {
        if (apiRef.current) {
            apiRef.current.intercept("update-task", data => {
                data.custom = "custom event";
            });
            apiRef.current.setNext(server);
        }
    }, [apiRef.current]);

    return (
        <Gantt
            tasks={tasks}
            links={links}
            apiRef={apiRef}
        />
    );
};

export default MyComponent;

Enabling the batch mode​

RestDataProvider also supports batching that allows putting multiple API calls into one HTTP request using a single batch request. It's possible to send requests of different types in one batch ("PUT"|"POST"|"DELETE"). RestDataProvider will combine all individual requests into one batch request. Please, refer to POST /{batchURL}.
To switch to the batch mode, in the constructor define the {batchURL} that will be applied to send multiple combined requests (e.g., POST https://master--svar-gantt-go-project.io/batch).

new RestDataProvider(
  "https://master--svar-gantt-go-project.io",
  { batchURL: "batch" }
);

The example below demonstrates how to enable the batch mode for updating data on tasks and links in case mass editing takes place.

import { useEffect, useRef } from "react";
import { RestDataProvider } from "wx-gantt-data-provider";
import { Gantt, ContextMenu } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const restProvider = new RestDataProvider(
    "https://master--svar-gantt-go--myproject.io",
    { batchURL: "batch" }
);

function GanttComponent() {
    const apiRef = useRef();
    let tasks, links;

    useEffect(() => {
        restProvider.getData().then(({ tasks: t, links: l }) => {
            tasks = t;
            links = l;
        });
    }, []);

    const init = (api) => {
        apiRef.current = api;
        api.setNext(restProvider);

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

    return (
        <ContextMenu api={apiRef.current}>
            <Gantt apiRef={apiRef} init={init} tasks={tasks} links={links} />
        </ContextMenu>
    );
}

export default GanttComponent;

Related articles: