Rich Text Field

Under the hood, we use Slate.js for our rich-text editor.

Simple Single Line Query

Sample Rich Text Query - Text Response

{
products {
name
description {
text
}
}
}

Output

{
"data": {
"products": [
{
"name": "ACME Hammer",
"description": {
"text": "A really good hammer."
}
}
]
}
}

Sample Rich Text Query - Raw Response Returns the raw Slate AST

{
products {
name
description {
raw
}
}
}

Output

{
"data": {
"products": [
{
"name": "ACME Hammer",
"description": {
"raw": {
"object": "value",
"document": {
"data": {},
"nodes": [
{
"data": {},
"type": "paragraph",
"nodes": [
{
"text": "A really good hammer.",
"marks": [],
"object": "text"
}
],
"object": "block"
}
],
"object": "document"
}
}
}
}
]
}
}

Sample Rich Text Query - HTML Response

{
products {
name
description {
html
}
}
}

Output

{
"data": {
"products": [
{
"name": "ACME Hammer",
"description": {
"html": "<p>A really good hammer.</p>"
}
}
]
}
}

Sample Rich Text Query - Markdown Response

{
products {
name
description {
text
}
}
}

Output

{
"data": {
"products": [
{
"name": "ACME Hammer",
"description": {
"markdown": "A really good hammer.\n"
}
}
]
}
}

Mutating Rich Text

Mutation

mutation {
createProduct(
data: {
name: "ACME Shovel"
description: {
document: {
data: {}
nodes: [
{
data: {}
nodes: [
{ marks: [], object: "text", text: "A really good hammer." }
]
object: "block"
type: "paragraph"
}
]
object: "document"
}
}
}
) {
name
description {
text
}
}
}

Output

{
"data": {
"createProduct": {
"name": "ACME Shovel",
"description": {
"text": "A really good shovel."
}
}
}
}

This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy