Gantt dependency datasource with async handlers

[Al]

My Gantt config is like this:

 

<ganttdatasource ref="ganttdatasource1"
                        :transport-read="ganttRead"
                        :transport-update="ganttUpdate"
                        :transport-create="ganttCreate"
                        :transport-destroy="ganttDestroy"
                        :transport-parameter-map="parameterMap"
                        :transport-submit="ganttSubmit"
                        schema-model-id="id"
                        :schema-model-fields="fields"
>
</ganttdatasource>

<ganttdependencydatasource ref="ganttdependencydatasource1"
                        :transport-read="dependRead"
                        :transport-update="dependUpdate"
                        :transport-create="dependCreate"
                        :transport-destroy="dependDestroy"
                        :transport-parameter-map="parameterMap"
                        schema-model-id="id"
                        :schema-model-fields="dependencyFields"
>
</ganttdependencydatasource>

    <gantt
        ref="kendogantt"
        id="gantt"
        :height="500"
        :editable-create="true"
        data-source-ref="ganttdatasource1"
        dependencies-data-source-ref="ganttdependencydatasource1"
        :assignments="assignments"
        :resources="resources"
    >
    </gantt>

 

Then methods:

methods: {
    dependRead: async function(options) {
        console.log("dependRead!", options)
        try {

            const links = await this.$axios.$get(................)

            options.success(links)

        } catch (ex) {
            options.error(ex)
        }
    },

 

All works fine except that I get spurious calls to dependRead, in the console I see two or three logs for 'dependRead' every time the gantt loads.

If I remove the async/await code then I see only one call to dependRead as expected - so my question is, should I be using blocking or non-blocking handlers for this? async handlers are the correct approach by my thinking...

 

[Interestingly ganttRead uses exactly the same async mechanism but that is only ever called once]

[Petar]

Hi Al,

Thank you for the provided details. Based only on the available details, we cannot say what is the reason why the dependRead method is called multiple times. 

We will take a deeper look at why the reported issue could be triggered. If you want to execute something after the remote data is available, I would recommend not using the async/await construction but use .then after the axios.get function. 

Let me know if using the .then method will resolve the issue in your application. Also, if you can provide a runnable example in which the issue can be replicated, this will be helpful for its faster resolution.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Al]

Hi Petar,

I tested .then instead of async/await and still I see dependRead firing multiple times.

[Petar]

Hi Al,

Thank you for the feedback. To be able to furhter investigate the issue, we will need a runnable example in which it can be replicated.

Can you send us such an example? 

Regards,
Petar
Progress Telerik

[Al]

Could you please point me to a working stackblitz example using axios + custom function to read (instead of builtin transport url handling)?  I tried to do it myself but I could not get it working with your backend.

If you could make such an example then I will fork it and try to replicate the behaviour

[Petar]

Hi Al,

I am afraid that we don't have such an example I can share with you. This is why I asked you about it. 

The way we recommend using the success callback function as in your code but without the async/await. What the success callback does is to notify the dataSource that the data request has completed successfully. Isn't it what you want to achieve?  Maybe the combination of the asynchronous axios.get and the callback function breaks somehow.  

Regards,
Petar
Progress Telerik

[Al]

Hi Petar,

I get the duplicated calls to dependread when I use either async/await or .then ie. whenever the handler is asynchronous then it gives the problem.

I can get rid of the async handling as you recommend but surely it is normal to handle these asynchronously, I mean these calls to the backend could be slow?

[Petar]

Hi Al,

What the success callback function does is similar to use async/await. You can check this StackOverflow post that describes the different approaches that can be used to implement asynchronous requests.

Check the end of the post and you will see that the async configuration of the $.ajax request is set to true by default. 

In the context of axios, what you can do is described in this example from their documentation. I am talking about this snippet:

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

I hope the above will help you resolve the issue. 

Regards,
Petar
Progress Telerik

[Al]

Thanks Petar. I am ok with handling async responses, as you can see I have now removed the async keyword and using regular .then to handle the callback on 'options' and it works just fine.

		dependRead: function(options) {
			
			console.log(`dependRead!`, options)

			this.$axios.get(................)
			.then((links)=> {
				options.success(links)
			})
			.catch((ex)=> {
				options.error(ex)
			})
               }

 

The problem is when I do as above then dependRead is logged more than once (generally twice but I have seen 3 or more).

I am only concerned because it is doing more backend calls than are necessary, and this only happens for dependRead (ganttRead with the exact same code only makes one call), so it really looks like a bug to me.

 

[Plamen]

Hello,

Yes indeed, in such case you can use a non 'async' method for the 'dependRead' function because it created with this functionality inbuilt in it and is handling this asynchronous behavior internally.

As for the multiple time calling this method it sound unusual indeed - would you please elaborate when you see these multiple logs - is it initially or after some specific interactions with the component.

Regards,
Plamen
Progress Telerik

[Al]

I see the multiple calls immediately when the gantt is loaded for the first time

[Al]

<client-only>
<ganttdatasource ref="ganttdatasource1"
:transport-read="ganttRead"
:transport-update="ganttUpdate"
:transport-create="ganttCreate"
:transport-destroy="ganttDestroy"
:transport-parameter-map="parameterMap"
schema-model-id="id"
:schema-model-fields="fields"
>
</ganttdatasource>

<ganttdependencydatasource ref="ganttdependencydatasource1"
:transport-read="dependRead"
:transport-update="dependUpdate"
:transport-create="dependCreate"
:transport-destroy="dependDestroy"
:transport-parameter-map="parameterMap"
schema-model-id="id"
:schema-model-fields="dependencyFields"
>
</ganttdependencydatasource>

<gantt
ref="kendogantt"
id="gantt"
:height="500"
:editable-create="true"
data-source-ref="ganttdatasource1"
dependencies-data-source-ref="ganttdependencydatasource1"
:assignments="assignments"
:resources="resources"
@add="ganttAdd"
@edit="ganttEdit"
>
</gantt>
</client-only>

[Plamen]

I have tried to simulate the issue in a sample stackblitz example but to no avail - at my side the event was always thrown once initially. I have used jQuery ajax for the fetching of the data but in this case we only need to return some data after some time so even a setTimeout will work for simulating the behavior.

Please review the example and let me know if there is anything else we could add in order to observe the unusual behavior.

[Al]

When I use the exact same dependRead handler as your sample I get 2x calls.
I get it once when the Gantt first loads, and then again after the timeout (when options.success is called).
The only difference is that mine is a static/ssr nuxt app BUT I have wrapped all gantt components in <client-only> tags, and, logging 'process.server' in dependRead shows both of calls are being made on the client so it doesn't appear to be related to any server-side events.

I don't know what more to say, perhaps it is some side-effect of nuxt...but it is weird that I see this only on dependRead, taskRead does not have the problem.

[Petar]

Hi Al.

I can't say if it is a side effect of NUXT but as far as we can't replicate it in a standard scenario we can't suggest an approach for resolving the reported issue.