Longform content with GraphQL

[martin-coded]

What is the recommended way to use the new longform content with GraphQL? It feels wrong and cumbersome to create a file in the _partials folder, then retrieve the required content in twig, pass it to the frontend using GraphQL, only to parse it again for styled output.

{% autoescape false %}
<CraftInlineMatrixDummy typeHandle='myEntry' myData='quak' otherField='blub'  />
{% endautoescape %}

The other solution, to output the styled data directly, goes against my understanding of using Craft CMS as a headless solution. This is because it has to be up to the frontend to decide what to do with the content. The same data could be displayed differently in the frontend in different cases. Not only the style but also the structure of the html can be different.

<h1>quak</h1><p>blub</p>

For a headless CMS, I think the output should be something like this.

{
  "data": {
    "id": "10700",
    "title": "My Single Entry",
    "longform": [
      {
        "id": "14915",
        "typeHandle": "ckeditor"
        "content": "<h1>Hi</h1><p>It's me the Lorem ipsum guy</p>"
      },
      {
        "id": "14916",
        "typeHandle": "myEntry"
        "myData": "quak"
        "otherField": "blub"
      },
      {
        "id": "15235",
        "typeHandle": "ckeditor"
        "content": "<p>End Lorem</p>"

      }
    ]
  }
}

Instead of

{
  "data": {
    "id": "10700",
    "title": "My Single Entry",
    "longform": "<h1>Hi</h1><p>It's me the Lorem ipsum guy</p><CraftInlineMatrixDummy typeHandle='myEntry' myData='quak' otherField='blub'  /><p>End Lorem</p>",
  }
}

The question is how is it possible to split the editor content back into structured data and also how is it possible to request only the necessary data from GraphQL.

I'm probably just looking at this the wrong way and I am stuck in my thinking process. I would appreciate any input.

[plcdnl]

I think it's essential to have a headless frontend that can be as dynamic as possible

[mandrasch]

+1

stumbled upon this today and was a bit sad that GraphQL won't output text and blocks (nested entries) separated 😢 😉

But I guess this could be added in future?

[jacobgraf]

Argh. I just hit this wall too. Being able to insert/embed entries within a CKEditor field is PERFECT, but we need to be able to iterate through these entries via GraphQL since we typically use Craft as a headless CMS. 😢

[davidhellmann]

I agree, it needs a way to get that data in a nice way via GQL. We are using craft also headless and creating twig templates for that partials is a way but then, I can't use my react comps to render that stuff. would be great to query that things like matrix blocks.

[OneX]

+1

I also see the need to have data presented differenty for headless use.

[f-elix]

+1 for this! This is very disappointing.

To make this work with a headless frontend (with SSR) right now requires the following steps:

• Create a twig template for each entry, even though the frontend is written with a framework, possibly in another repo, all with the exact same placeholder content (something like %%%{{entry.id}}%%%) to identify the entry position in the html.
• Request the entry data with the ckeditor field
• Extract the ids from the field's html.
• Make a second request to retrieve the entries data (not good for performance)
• Format the data by splitting the field's html into either html blocks or entry blocks
• Now you can properly render the frontend.

I may be missing some steps, but the point is just to illustrate that the current situation is not really viable longterm for headless frontends.

The only workaround I can think of is going back to the way I was doing it before, with a Neo or Matrix field and have a CKE editor field inside a text block.

[jasonlav]

Make a second request to retrieve the entries data (not good for performance)

In the GraphQL schema, an option appears when you have a CKEditor field capable of referencing other entries:

Query for entries in the “{name of field}” CKEditor field

I'm not seeing any related fields/options with the GraphQL explorer, but it seems you may be able to efficiently query for it?

[mandrasch]

Good News by Brandon Kelly, it's on the radar 🎉

Yeah, I’m going to change the response format to be an array of markup + entry chunks in CKEditor 5.0 (which will be coming sooner than later).

[f-elix]

Awesome!

[Jones-S]

Any news on this? It would be awesome to have that feature now.

[mathieuser]

+1 I need this too. For now, @martin-coded could you elaborate on how you can pass data from a twig template to Graphql? I cant find too much info about this... Thank you!

[GerbenKR]

Any update on this?

[brandonkelly]

CKEditor 4.8.0 is out with a new “GraphQL Mode” setting, which can be set to “Full data” to expose a ton of data via GraphQL, including nested entries. (#403)

[martin-coded]

Thanks so much guys! This new option is a game changer for me🥇