Updating Temporary Task IDs with Definitive Database IDs in Gantt Component

Bagestan

Hi everyone,

I'm using the Gantt component library and running into an issue with temporary task IDs. When a task is created on the frontend, it is assigned a temporary ID (e.g., "temp://1740162243539"). Simultaneously, I create the task on the backend, which returns the definitive database ID after saving.

The problem arises when subsequent operations (like creating a child task) reference the parent's temporary ID. This causes issues because the child task ends up with a parent value that doesn't match the actual database ID.

Example of a task object:

{ id: "temp://1740162243539", inProgress: false, task: { $h: 31, $level: 1, $skip: false, $w: 100, $x: 200, $y: 269, details: "", duration: 1, end: "2025-02-22T23:00:00.000Z", id: "temp://1740162243539", parent: 0, progress: 0, start: "2025-02-21T23:00:00.000Z", text: "task", type: "task" } }

My question is:
Is there a built-in method or recommended approach in the Gantt API to update a task’s ID from a temporary one to the definitive database ID after the backend returns it? If not, what is the best strategy to handle such updates (ensuring that references like parent in child tasks are correctly updated) within the Gantt component?

In the backend i'm following the Guide POST /tasks and the Guide of .send()

Also I tried to call the api.exec("provide-data", { ... }) to update the task id, but no success.

Any guidance or suggestions would be greatly appreciated!

Thank you!

tasha

Hello Bagestan

To update temporary ids to the constant ids of your database you can use RestDataProvider. With the help of it your ids will be automatically updated. You need to add your server url to the RestDataProvider like this:

const url = "https://some_backend_url";
const server = new RestDataProvider(url);

And dont forget to add RestDataProvider into the init function:

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

Please take a look at the example: https://stackblitz.com/edit/vitejs-vite-rqhxkxd8?file=src%2FApp.jsx,src%2FGanttComponent.jsx

Bagestan

Great, I'm already using the RestDataProvider and it works, great, however it doesn't solve my problem with the tempIds.

When the event "update-task" creates a task, it does with the tempId and even with the RestDataProvider i'm still having a tempId on the task until I refresh the page to then get all te data from the backend with the real ID.

Using the RestlDataProvider in my case doesn't update the just-created task with the definitive Id from the database

Helga

DataProvider will not update IDs on the client side. Instead, it stores the corresponding server and client ID pairs. So, when the new task is created on the client side, its ID will not change, but the subsequent requests to server will be sent using the definitive ID returned by server upon creation.

You can see all these in the sample shared by tasha. But please make sure that you provide the correct response from your server, which should be { id: some }.