Query Error with field Umbraco.Grid about nikcio.uheadless HOT 16 CLOSED

Hi @biapar,

The Umbraco Grid editor isn't supported by default. To use the Grid editor you will need to create custom models for fetching the data. You can look at how the BlockListModel is supported in the source code as inspiration on how to make these models:

Also look at the documentation on how to create your own property models: https://github.com/nikcio/Nikcio.UHeadless/blob/v3/contrib/docs/v3/propertyValues/newValue.md

from nikcio.uheadless.

And How to bypass to fetch the Grid into the query?

from nikcio.uheadless.

I'm not sure I know what you mean. What are you trying to do?

from nikcio.uheadless.

I installed U10 with the Clean starter kit. I wish get/put data in headless mode for my POC with OAuth protection. I try to get data of the home page but give me that error.

from nikcio.uheadless.

If you'd like to exclude the grid editor you'll need to make a custom model for the grid editor. This can be an empty model if you're not looking to use a grid editor. The reason you're getting the error is because UHeadless doesn't have a specific model to handle grid editors and therefore just tries to serialize the grid editors value which is recursive and cannot be serialized. So for the error to go away you need to tell UHeadless to use another model for the grid editor.

from nikcio.uheadless.

All editors that doesn't have a specific model will fall back to this model:

And it's here the error occurs because the Grid editors value cannot be serialized.

from nikcio.uheadless.

It's possibile there to check if its a Grid to bypass that. Please, Could you made an example for Grid model?

from nikcio.uheadless.

This package Vertica.Umbraco.Headless is able to bypass the grid data.
Here is the result:

{"alias":"home","content":{"mainContent":null,"socialLinks":[{"alias":"iconLinkItem","content":{"icon":"Github - Brands","link":{"name":"GitHub","target":"_blank","url":"https://github.com/prjseal","linkType":"External"}}},{"alias":"iconLinkItem","content":{"icon":"Box Open - Solid","link":{"name":"View this package on Our Umbraco","target":"_blank","url":"https://our.umbraco.com/packages/starter-kits/clean-starter-kit/","linkType":"External"}}},{"alias":"iconLinkItem","content":{"icon":"Twitter - Brands","link":{"name":"Follow me on Twitter","target":"_blank","url":"https://twitter.com/CodeSharePaul","linkType":"External"}}},{"alias":"iconLinkItem","content":{"icon":"Share Alt - Solid","link":{"name":"Read my blog","target":"_blank","url":"https://codeshare.co.uk","linkType":"External"}}},{"alias":"iconLinkItem","content":{"icon":"Discord - Brands","link":{"name":"Umbraco Discord Server","target":"_blank","url":"https://discord.gg/umbraco","linkType":"External"}}},{"alias":"iconLinkItem","content":{"icon":"Coffee - Solid","link":{"name":"Buy me a coffee","target":"_blank","url":"https://codeshare.co.uk/coffee","linkType":"External"}}}],"title":"Clean Starter Kit","subtitle":"For Umbraco","mainImage":{"name":"Bluetooth white keyboard","width":1920,"height":1280,"extension":"jpg","additionalProperties":{},"url":"/media/f01jqvmq/bluetooth-white-keyboard.jpg","focalPoint":{"left":0.5,"top":0.5},"crops":[]},"metaName":"","metaDescription":"","metaKeywords":[]},"metadata":{"name":"Home","url":"https://localhost:44311/","id":"dcf18a51-6919-4cf8-89d1-36b94ce4d963","languages":[]},"navigation":{"breadcrumb":[]}}

from nikcio.uheadless.

Instead the package Umbraco Content Api is able to output the grid values.

{"system":{"id":"dcf18a51-6919-4cf8-89d1-36b94ce4d963","name":"Home","urlSegment":"home","type":"Content","createdAt":"2022-09-26T21:48:00.7862265","editedAt":"2022-09-27T10:55:02.7200514","contentType":"home","locale":"en-US","url":"https://localhost:44311/"},"fields":{"mainContent":{"name":"1 column layout","nrOfColumns":12,"sections":[{"grid":"12","columnWidth":12,"rows":[{"name":"Half","id":"00000000-0000-0000-0000-000000000000","nrOfColumns":12,"areas":[{"grid":"6","columnWidth":6,"controls":[{"value":"<p>Lorem Ipusm\u00A0</p>","editor":{"name":"Rich text editor","alias":"rte"}}]},{"grid":"6","columnWidth":6,"controls":[{"value":{"id":1104,"imageUrl":"/media/cpth2fx5/community-front-row.jpg"},"editor":{"name":"Image","alias":"media"}}]}]}]}]},"socialLinks":[{"system":{"id":"7f500796-9d5f-435d-9104-0c2ea0edd09d","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Github - Brands","link":{"name":"GitHub","url":"https://github.com/prjseal","target":"_blank","type":"External"}}},{"system":{"id":"5e1a2087-3cfe-4327-a1f0-b302d3e5a227","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Box Open - Solid","link":{"name":"View this package on Our Umbraco","url":"https://our.umbraco.com/packages/starter-kits/clean-starter-kit/","target":"_blank","type":"External"}}},{"system":{"id":"d0fb5855-1c9a-4913-8ae6-c230dcc41f3c","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Twitter - Brands","link":{"name":"Follow me on Twitter","url":"https://twitter.com/CodeSharePaul","target":"_blank","type":"External"}}},{"system":{"id":"713f835f-20d0-4709-bd8e-770708dd5290","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Share Alt - Solid","link":{"name":"Read my blog","url":"https://codeshare.co.uk","target":"_blank","type":"External"}}},{"system":{"id":"363e4f50-412b-46c6-81ed-626b5eb6ea8c","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Discord - Brands","link":{"name":"Umbraco Discord Server","url":"https://discord.gg/umbraco","target":"_blank","type":"External"}}},{"system":{"id":"815a6885-dbbf-46d9-a3da-bbf4b74e2d4f","name":null,"urlSegment":null,"type":"Element","createdAt":"0001-01-01T00:00:00","editedAt":"0001-01-01T00:00:00","contentType":"iconLinkItem","locale":null,"url":null},"fields":{"icon":"Coffee - Solid","link":{"name":"Buy me a coffee","url":"https://codeshare.co.uk/coffee","target":"_blank","type":"External"}}}],"title":"Clean Starter Kit Demo","subtitle":"For Umbraco","mainImage":{"system":{"id":"5598b628-b390-4532-8bb5-dab06089e9d7","name":"Bluetooth white keyboard","urlSegment":null,"type":"Media","createdAt":"2022-09-26T21:48:01.8547148","editedAt":"2022-09-26T21:48:02.0770036","contentType":"Image","locale":"en-US","url":"https://localhost:44311/media/f01jqvmq/bluetooth-white-keyboard.jpg"},"fields":{"umbracoFile":{"src":"/media/f01jqvmq/bluetooth-white-keyboard.jpg","crops":{}},"umbracoWidth":1920,"umbracoHeight":1280,"umbracoBytes":1389538,"umbracoExtension":"jpg"}},"metaName":"","metaDescription":"","metaKeywords":[]}}

from nikcio.uheadless.

Yeah it would be a fine addition to have a Grid editor model. I just haven't used the grid editor very much and didn't have a good model in mind for the data which is why it's been left out of the package to start. You're welcome to add a PR with a Grid editor model.

from nikcio.uheadless.

I'm trying to do at first stage a by-pass Grid Editor and 2nd to get data like the examples.

from nikcio.uheadless.

I create this code:

using Nikcio.UHeadless.Base.Properties.Commands;
using Nikcio.UHeadless.Basics.Properties.EditorsValues.BlockList.Models;
using Nikcio.UHeadless.Basics.Properties.Models;
using Nikcio.UHeadless.Core.Reflection.Factories;
using HotChocolate;
using Nikcio.UHeadless.Base.Properties.Models;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Extensions;

namespace UGCare.Models
{    /// <summary>
     /// Represents a rich text editor
     /// </summary>
    [GraphQLDescription("Represents a grid editor.")]
    public class GridPropertyValue : PropertyValue
    {

        [GraphQLDescription("Gets the value of the grid editor.")]
        public virtual string? Value { get; set; }

        public GridPropertyValue(CreatePropertyValue createPropertyValue) : base(createPropertyValue)
        {
            var value = createPropertyValue.Property.GetValue(createPropertyValue.Culture);
            if (value == null)
            {
                return;
            }

            Value = (string)value;
        }
    }
}

in the startup:

 services.AddUmbraco(_env, _config)
                .AddBackOffice()
                .AddWebsite()
                .AddComposers()
               .AddUHeadless(new()
               {
                   PropertyServicesOptions = new()
                   {
                       PropertyMapOptions = new()
                       {
                           PropertyMappings = new() {
                    propertyMap => propertyMap.AddEditorMapping<GridPropertyValue>("myGridPropertyValueAlias")
                }
                       }
                   }
               })
                  .AddHeadless()
                .Build();

Strange that It's not possible to debug when I launch GraphQL query from the IDE.

from nikcio.uheadless.

It seems that you've entered the wrong alias. You need to use the Umbraco built-in editor aliases to target an editor. I belive it's "Umbraco.Grid" but you can use a constant like done here:

from nikcio.uheadless.

Good News...I've extended your code to manage the Grid and I'm able to bypass the problem and build the base to read Grid data.

from nikcio.uheadless.

It seems that you've entered the wrong alias. You need to use the Umbraco built-in editor aliases to target an editor. I belive it's "Umbraco.Grid" but you can use a constant like done here:

Nikcio.UHeadless/src/Nikcio.UHeadless.Base/Basics/Maps/Extensions/PropertyMapExtensions.cs

Line 31 in ada63c4

propertyMap.AddEditorMapping<BasicMultiUrlPicker>(Constants.PropertyEditors.Aliases.MultiUrlPicker);

propertyMap => propertyMap.AddEditorMapping<GridPropertyValue>("Umbraco.Grid")

Oh, yes...I put "Umbraco.Grid"...and now it debug and goes...

from nikcio.uheadless.

With this code I've the JSON value of the Umbraco Grid Editor.

`using Nikcio.UHeadless.Base.Properties.Commands;
using Nikcio.UHeadless.Basics.Properties.EditorsValues.BlockList.Models;
using Nikcio.UHeadless.Basics.Properties.Models;
using Nikcio.UHeadless.Core.Reflection.Factories;
using HotChocolate;
using Nikcio.UHeadless.Base.Properties.Models;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Extensions;
using Umbraco.Cms.Core.Models;
using Newtonsoft.Json;

namespace UGCare.Models
{ ///

    [GraphQLDescription("Gets the value of the grid editor.")]
    public virtual string? Value { get; set; }


    public GridPropertyValue(CreatePropertyValue createPropertyValue) : base(createPropertyValue)
    {
        var value = createPropertyValue.Property.GetValue(createPropertyValue.Culture);
        
        var content = createPropertyValue.Content;
        if (content == null)
        {
            return;
        }

        foreach (var item in createPropertyValue.Content.Properties)
        {

        }

        string alias = createPropertyValue.Property.Alias;
        Value = createPropertyValue.Content.GetProperty(alias).GetValue().ToString();
    
    }
}

}`

{ "editorAlias": "Umbraco.Grid", "alias": "mainContent", "value": { "alias": "mainContent", "value": "{\r\n \"name\": \"1 column layout\",\r\n \"sections\": [\r\n {\r\n \"grid\": \"12\",\r\n \"rows\": [\r\n {\r\n \"name\": \"Half\",\r\n \"id\": \"de49bfcc-f1ee-4d62-90d9-385e3b9f1c90\",\r\n \"areas\": [\r\n {\r\n \"grid\": \"6\",\r\n \"controls\": [\r\n {\r\n \"value\": \"<p>Lorem Ipusm </p>\",\r\n \"editor\": {\r\n \"name\": \"Rich text editor\",\r\n \"alias\": \"rte\",\r\n \"view\": \"rte\",\r\n \"render\": null,\r\n \"icon\": \"icon-article\",\r\n \"config\": {}\r\n },\r\n \"styles\": null,\r\n \"config\": null\r\n }\r\n ],\r\n \"styles\": null,\r\n \"config\": null\r\n },\r\n {\r\n \"grid\": \"6\",\r\n \"controls\": [\r\n {\r\n \"value\": {\r\n \"focalPoint\": {\r\n \"left\": 0.5,\r\n \"top\": 0.5\r\n },\r\n \"id\": 1104,\r\n \"udi\": \"umb://media/167ee71553ff4a8bab507d630c8448fa\",\r\n \"image\": \"/media/cpth2fx5/community-front-row.jpg\"\r\n },\r\n \"editor\": {\r\n \"name\": \"Image\",\r\n \"alias\": \"media\",\r\n \"view\": \"media\",\r\n \"render\": null,\r\n \"icon\": \"icon-picture\",\r\n \"config\": {}\r\n },\r\n \"styles\": null,\r\n \"config\": null\r\n }\r\n ],\r\n \"styles\": null,\r\n \"config\": null\r\n }\r\n ],\r\n \"styles\": null,\r\n \"config\": null\r\n }\r\n ]\r\n }\r\n ]\r\n}" } },

from nikcio.uheadless.