Using Data Grid with DataManager and GrapQLAdapter in Angular

[Harald Schwankl]

Hi support team, I'm currently experimenting with the Data-Grid and the GrapQLAdaper. The normal query works fine. But with the mutations I get an error message:

SyntaxError: "[object Object]" is not valid JSON

    at JSON.parse (<anonymous>)

    at DataManager.successFunc (http://localhost:4200/main.js:26718:23)

    at Fetch.triggerEvent (http://localhost:4200/main.js:7104:7)

    at http://localhost:4200/main.js:7087:15

    at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:6933:158)

    at Object.onInvoke (http://localhost:4200/main.js:378692:25)

    at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:6933:46)

    at Zone.run (http://localhost:4200/polyfills.js:6718:35)

    at http://localhost:4200/polyfills.js:7793:28

    at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6960:171)

As a backend I use an Apollo server. However, the mutations work perfectly in the Apollo client.

Code:

this.adaptor = new GraphQLAdaptor({
response: {
  result: 'getLanguages.result',
  count: 'getLanguages.count',
},
query: `query getLanguagesFromService($datamanager: DataManager) {
  getLanguages(datamanager: $datamanager) {
    count,
    result {guid, name, code}
  }
}`,
getMutation: function(action: any): string {
if (action === 'insert') {
  return `mutation CreateLanguageMutation($value: LanguageInput!){
    createLanguage(value: $value){
    result {guid, name, code}
    }
  }`;
}
if (action === 'update') {
  return `mutation UpdateLanguageMutation($value: LanguageInput!){
    updateLanguage(value: $value) {
    guid, name, code
    }
  }`;
}
if (action === 'remove') {
  return `mutation DeleteLanguageMutation($value: LanguageInput!){
    deleteLanguage(value: $value) {
    guid, name, code
    }
  }`;
}
},
});

I 

Regards,

Harald

[Aishwarya Rameshbabu]

Hi Harald,

Greetings from Syncfusion support.

After reviewing your query, we could see that you are facing an issue with handling CRUD operations using mutation in the GraphQLAdaptor. This is a known issue on our end, and it has been resolved. The fix for this issue will be included in our 2024 Volume -1 Main Release, which is expected to be rolled out on March 15th, 2024. Thank you for taking the time to bring this to our attention. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback Link :  https://www.syncfusion.com/feedback/51690/the-crud-operations-are-not-being-performed-properly-while-using-the-graphql

Disclaimer : "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization"

Regards

Aishwarya R

[Aishwarya Rameshbabu]

Hi Harald,

We are glad to announce that we have included the fix for the “Issue with handling CRUD operations using mutation in the GraphQLAdaptor” in our 25.1.35 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

Root cause:

The problem arises from parsing the object using JSON.parse.

Solution:

Skipped the parsing if the result is already an object.

Feedback: https://www.syncfusion.com/feedback/51690/the-crud-operations-are-not-being-performed-properly-while-using-the-graphql

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/25.1.35?type=all#grid

We appreciate your support and thank you for your patience in awaiting this release. Please feel free to contact us if you require any further assistance.

Regards,

Aishwarya R