GraphQL

Vizy fields support being queried via GraphQL. To give you the utmost flexibility with rendering content, we provide the full, raw node structure for you to handle however you like.

Using nodes to query your data is the most common scenario.

Nodes

Example

{
  entries(section:"blog") {
    ... on vizy_blog_Entry {
      vizyField {
        nodes {
          ... on VizyNode_Paragraph {
            type
            html
          }
          
          ... on vizyField_mediaWithImage_BlockType {
            enabled
            collapsed
            blockTypeId
            blockTypeHandle
            
            plainText
            media {
              id
              title
              url
            }
          }
        }
      }
    }
  }
}
{
  "data": {
    "entries": [
      {
        "vizyField": {
          "nodes": [
            {
              "type": "paragraph",
              "html": "<p>Wait until you get a load of this</p>"
            },
            {
              "enabled": true,
              "collapsed": false,
              "blockTypeId": "type-yHLnqH7UvJ",
              "blockTypeHandle": "mediaWithImage",
              "plainText": "Where summer happens yo.",
              "media": [
                {
                  "id": "251",
                  "title": "Chilling on the beach",
                  "url": "beach-chill.jpg"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

In the above example, we're using inline fragments to access the different types of nodes available.

In addition, for a Vizy Block node, we define inline fragments for each block type handle. You'll have access to some attributes of a Vizy Block node, as well as any custom fields. The above example has plainText and media as a Plain Text field and Assets field respectively.

The VizyNodeInterface interface

This is the interface implemented by all nodes.

FieldTypeDescription
typestringThe type of the node.
tagNamestringThe HTML tag name of the node.
attrsjsonThe attributes of the node.
marksjsonThe marks of the node.
contentjsonThe content of the node as structured node JSON, including nested marks and text content.
htmlstringThe content of the node as rendered HTML.
textstringThe inner text of the node, if applicable.
rawNodejsonThe raw JSON structure for the node, as stored in the database.

Available node type fragments are:

  • VizyNode_Blockquote
  • VizyNode_BulletList
  • VizyNode_CodeBlock
  • VizyNode_HardBreak
  • VizyNode_Heading
  • VizyNode_HorizontalRule
  • VizyNode_Iframe
  • VizyNode_Image
  • VizyNode_ListItem
  • VizyNode_OrderedList
  • VizyNode_Paragraph

The VizyImageNodeInterface interface

This is the interface implemented by all image nodes.

FieldTypeDescription
assetAssetInterfaceReturns the asset element used for this image.

The VizyBlockInterface interface

This is the interface implemented by all Vizy Block nodes.

FieldTypeDescription
typestringThe type of the node.
tagNamestringThe HTML tag name of the node.
attrsarrayThe attributes of the node.
marksarrayThe marks of the node.
contentstringThe content of the node.
enabledbooleanWhether the block is enabled.
collapsedbooleanWhether the block is collapsed.
blockTypeIdstringThe ID of the block type.
blockTypeHandlestringThe handle of the block type.

You can use the rawNodes to return the entire node structure as a JSON string.

{
  entries(section:"blog") {
    ... on vizy_blog_Entry {
      vizyField {
        rawNodes
      }
    }
  }
}
{
  "vizyField": {
    "rawNodes": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"The name \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://en.wikipedia.org/wiki/Gin\",\"target\":\"_blank\"}}],\"text\":\"gin\"},{\"type\":\"text\",\"text\":\" is a \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"shortened\"},{\"type\":\"text\",\"text\":\" form of the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"italic\"}],\"text\":\"older\"},{\"type\":\"text\",\"text\":\" English word genever.\"}]}]"
  }
}

Or, you can use renderHtml to return the generated HTML, as determined by Craft.

{
  entries(section:"blog") {
    ... on vizy_blog_Entry {
      vizyField {
        renderHtml
      }
    }
  }
}
{
  "vizyField": {
    "renderHtml": "<p class=\"text-left\">The name <a href=\"https://en.wikipedia.org/wiki/Gin\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">gin</a> is a <strong>shortened</strong> form of the <em>older</em> English word genever.</p>"
  }
}

The nodes query

This query is used to query for nodes, similar to how we would normally query nodes.

ArgumentTypeDescription
wherestringUsed to filter items based on params. This should be a JSON-encoded string.
limitintLimit the number of nodes returned.
orderBystringReturn nodes ordered by a property.

Where

Return all paragraph nodes, and no other node types. See query nodes for more examples of how to query. This must be a JSON-encoded string.

nodes(where: "{ \"type\": \"paragraph\" }") {
    
}

Limit

Return the first 2 nodes.

nodes(limit: 2) {
    
}

Order By

Return all nodes ordered by their type.

nodes(orderBy: 'type DESC') {
    
}

Previous ← Node Collection Next Installation & Setup →

Get started with Vizy

Available for Craft 4. Get it from the plugin store.