LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • ℹ️Siteglide Support Policy
      • ℹ️Siteglide Technology Stack
      • ℹ️External Resources
      • ℹ️Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • ℹ️Site Details
      • ℹ️Site Users
      • 📋Install & Manage Modules
      • 💳Go Live
      • 💳Subscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • 💻Subdomain on a separate instance
        • 📋How to setup a multi domain start page
      • ☁️Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • 💳Billing Setup
      • 💳Subscriptions and Changes
      • 💳Automatic Site Upgrades
      • 💳Invoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍💻Agency Account
      • 👩‍💻Clients
      • 👩‍💻Site Copies
      • 👩‍💻Agency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • ℹ️About
      • 📋Site Setup
      • ❔Troubleshooting
      • 💻Reference
      • 🛳️CLI Changelog
      • 🧙‍♂️Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • ℹ️About
      • 💻Reference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • ℹ️About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • ℹ️Field Types
      • ℹ️Custom Field IDs
    • Zapier Integration
      • ℹ️Formatting arrays correctly
    • Developer Marketplace
      • ℹ️About Building Modules
      • ℹ️Module Setup
      • ℹ️Site Template Modules - and How to Make Your Own
      • ℹ️Create Folder Structure
      • ℹ️Updating Modules
      • ℹ️Submit Module for Approval
      • ℹ️Adding Payment to a Module
      • ℹ️Theme Module Example
      • ℹ️Data & UI Module Example
      • 💻Reference
      • 🌳File Structure
    • Release Notes
      • 🛳️Siteglide Admin/API - Changelog
      • 🛳️Module - System Files - Changelog
      • 🛳️Module - eCommerce - Changelog
      • 🛳️Module - Menu - Changelog
      • 🛳️Module - Slider - Changelog
      • 🛳️Module - Secure Zones - Changelog
      • 🛳️Module - FAQ - Changelog
      • 🛳️Module - Events - Changelog
      • 🛳️Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • 🏗️Marketplace Themes & Templates
        • 🏗️Create Site From Template
        • 🏗️Install SiteBuilder Module
        • 🏗️Create a Page Template
        • 🏗️Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • 🏗️Editing Tailwind CSS using the recommended CLI method
        • 🏗️Tailwind CSS Themes - Choosing a Build Method
        • 🏗️Tailwind CSS - Preview Mode
        • 🏗️Tailwind's JIT Compiler Via CDN (deprecated)
        • 🏗️Theme Presets
        • 🏗️Example Tailwind Project Setup
      • Layouts
        • 🏗️Insert Static Layouts
        • 🏗️Installing Dynamic Layouts
        • 🏗️Editing Dynamic Layouts
        • About Layouts
          • 🏗️Dynamic Layouts
          • 🏗️Static and Dynamic Form Layouts
          • 🏗️Sliders
      • 💻Reference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • 🗓️Live Updates Changelog
      • ℹ️SiteBuilder JavaScript
        • ℹ️Forms JS
        • ℹ️Social Sharing JS
        • ℹ️Sliders JS
        • ℹ️Dark Mode JS
        • ℹ️Cookie Settings JS
      • ℹ️SiteBuilder Liquid Includes
        • ℹ️Pagination
      • ℹ️SiteBuilder Liquid Functions
        • ℹ️Detail Page Valid
        • ℹ️Field Mapping
        • ℹ️Get Table Config
        • ℹ️Case From Order ID
      • 🗓️SiteBuilder Changelog
    • Extend SiteBuilder
      • ℹ️Create SiteBuilder Themes
      • ℹ️Create Marketplace Modules
      • ℹ️Adding Dynamic Layouts to Themes & Modules
      • ℹ️Adding Static Layouts to your Theme
      • 💻Reference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • ℹ️Studio
      • ℹ️Code View & Toolbox
      • ℹ️About Pages
        • ℹ️Page Settings
        • ℹ️Custom Fields in Pages
        • ℹ️Pages with Siteglide CLI
      • ℹ️About Page Templates
        • ℹ️Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • ℹ️System Pages
      • 💻Reference
      • 🌳File Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • 💻Assets with CLI
      • 🔼Migrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • 🌳Assets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • ℹ️About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • 🧙‍♂️Go Further: Forms
        • ℹ️Migrating Forms
        • ℹ️Explained - Preventing Spam Form Submissions and Captchas
        • ℹ️Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • ℹ️Forms Error Callback and Validation
        • ℹ️Forms Success Callback
        • ℹ️File Upload Previews
      • 🌳Forms File Structure
      • 💻Reference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • ℹ️About
        • ℹ️Email Templates
        • ℹ️Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • ℹ️Integration Automations
        • ℹ️A Transactional Email Example
        • ℹ️An API Call Action Example
        • ℹ️A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • 🧙‍♂️Go Further
      • 💻Reference
      • 🌳File Structure
    • Categories
      • 🚀Quickstart: Categories
      • ℹ️About
        • ℹ️Outputting Categories on WebApp / Module / eCommerce Layouts
        • ℹ️Filtering WebApps and Modules by Categories Using Liquid Parameters
      • 🌳File Structure
      • 💻Reference
    • Company Information
      • ℹ️About
      • 💻Reference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • ℹ️About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • ℹ️About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • 🧙‍♂️Go Further
          • ℹ️Secure Zones with Siteglide CLI
          • ℹ️Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • ℹ️Layouts
        • 💻Reference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • 🌳File Structure
        • 💻Reference
      • Events
        • 🚀Quickstart: Events
        • ℹ️Standard List View
        • ℹ️Getting Started with Event Filtering & Searching
        • ℹ️Filter by Category
        • ℹ️Filter By Host (Author)
        • ℹ️Filter by Event Dates
        • ℹ️Datasourcing the Event Host
        • ℹ️Search
        • ℹ️Map List View
        • ℹ️Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • 💻Reference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • 💻Reference
      • Slider
        • 🚀Quickstart: Slider
        • 💻Reference: Slider
    • Community Modules
      • 🏗️SiteBuilder
      • 🚀CRM Sync
        • ℹ️About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • 🗓️CRM Sync Changelog
    • Go Further: Modules
      • ℹ️Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • ℹ️WebApp List Layout
      • ℹ️WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • ℹ️ecommerce/basic_payment
      • 📂Payment Gateways
        • 💻Building a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • 🌳Basic Payment Forms Folder Structure
      • 🌳Cart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • 🌳Includes File Structure
      • 💻Includes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Prerequisites
  • Introduction
  • Saving your GraphQL File
  • Step 1) Find or Create a Project Folder on your Device
  • Step 2) Use Siteglide-CLI to pull down the Site's main File Structure
  • Step 3) Load the Project Folder in a Text Editor/ Code Editor
  • Step 4) Add a new folder called graph_queries
  • Step 5) Create a new file in that folder to store your GraphQL Query inside
  • Step 6) Use Siteglide CLI to sync or deploy that file to your Site
  • Adding the GraphQL Liquid Tag
  • Accessing the Results
  • Looping over the Results
  • Step 1) Output the Results as shown above
  • Step 2) Find the key which holds the main array of results
  • Step 3) Implement a Liquid For Loop to loop over the results
  • Step 4) Output properties inside each Item's iteration
  • Outputting Layouts
  • Congratulations
  • Next Time

Was this helpful?

Export as PDF
  1. Developer Tools
  2. GraphQL
  3. Tutorials

Tutorial 5 - Using Liquid to run GraphQL queries on your Site

PreviousTutorial 4 - (Answers)NextTutorial 6 - Variables

Last updated 4 months ago

Was this helpful?

You've now used the GraphQL playground to write queries which fetch data. Now you're probably itching to see how you can add one to a Site!

Prerequisites

  • You've completed the "Learning GraphQL" tutorials 1 - 4.

  • In order to use GraphQL results on your Page, you'll need to be familiar with Dot Notation Liquid syntax. You can get started with learning to use . You may find that you want to refer back and forth between articles on Dot Notation and GraphQL as you continue with your learning.

  • You'll need to be familiar with Siteglide-CLI. In this tutorial we'll be using Siteglide-CLI to add a GraphQL folder and sync our new queries up to the Site.

  • - optional- Read more about GraphQL and when it might be best used.

Introduction

Last time, we looked at how to use filter to refine your queries so that they only return results matching particular criteria.

So far we've been working in GraphiQL, the interative playground. This time, we'll run a GraphQL query on your Starter Site. We'll also take a quick look at how to handle the results- but you can learn more about this by following our Documentation on and .

Saving your GraphQL File

The best way to run your GraphQL query on a Site is to save the query inside a GraphQL file. This keeps it tidy and allows you to easily re-use the same query elsewhere on the Site should you need to.

Step 1) Find or Create a Project Folder on your Device

If you're following this tutorial with the same Site each time, you'll already have a project folder. After all, we have been using the .siteglide-config file in your Project Folder to interact with the GraphiQL interactive playground.

In this example, my project folder

Step 2) Use Siteglide-CLI to pull down the Site's main File Structure

We need to add a GraphQL query inside a specific folder in order to refer to it with Liquid. Before we do that- we need to see your Site's File Structure so we know where to add the folder.

In terminal, you'll need to change directory to the Project Folder.

If you've not already, run a pull command in terminal to pull down the current file structure: siteglide-cli pull my_environment_name

If you want to refresh your memory on using the Siteglide-CLI, you can learn more** here**.

Step 3) Load the Project Folder in a Text Editor/ Code Editor

I'll be using Microsoft Visual Studio Code in this example. Other Editors are available.

All the folders and files that can be synced with your Site are in the marketplace_builder folder.

Step 4) Add a new folder called graph_queries

Open up the marketplace_builder folder. If you've not already got a folder inside this called graph_queries , create one now.

Step 5) Create a new file in that folder to store your GraphQL Query inside

Create a new file to store your query inside. It's best to give the file the exact same name as your query. This will make it easier to find later.

The file should have the extension .graphql.

Step 6) Use Siteglide CLI to sync or deploy that file to your Site

So that file now exists on your device, but not yet on your Site. You'll need to either sync or deploy the file to your Site.

The choice of command is up to you. sync will watch for changes in the marketplace_builder folder, so you'll need to make a change in the file after running the command before your file is uploaded. The sync command will continue to watch and sync files until you cancel it. deploy will simply deploy all your local files to the Site as a one off command.

Here, I'll use sync:

This query file will not be visible in Code Editor, but the files will be on the server and Liquid will be able to access them. The reason for not displaying them here is to hide the most complex code from areas where Clients and non-developers can access it. This might change in the future.

If you wanted to check if the file has synced correctly, you can turn off sync, delete the file and run a pull command. In our experience, there's no need to run this check, as sync will tell you if a file is synced and "done" accurately.

Adding the GraphQL Liquid Tag

We'll use the graphql Liquid tag provided by platformOS. You may see other developers familiar with platformOS using tags like query_graph or execute_query, but graphql is the most up-to-date:


<div data-gb-custom-block data-tag="-"></div>

<div data-gb-custom-block data-tag="-" data-my_results='get_items_with_musical_names'></div>

<div data-gb-custom-block data-tag="-"></div>

Notes:

  • The tag itself is graphql

  • The first parameter you give should be a new variable name. This will create a Liquid variable containing your results- you can choose your own name.

  • After the equals = sign, you should write the file name of your GraphQL file, without its file extension or any folders. For example, my filename is "get_items_with_musical_names.graphql" so I remove the extension: "get_items_with_musical_names" .

Accessing the Results

You can output all of your results on the Page, using Liquid output syntax {{ }} to output the variable we defined earlier.

{% graphql my_results = "get_items_with_musical_names" %}
{{my_results}}

Notes:

  • The Liquid output must be on any line below the graphql tag.

  • You can output this in any Liquid File; this includes Pages, Page Templates, Headers, Footers, Layouts, Code Snippets and Workflow/ Auto-Responders.

The results will output in Hash format. You can use dot notation to access specific results within the Object.

Looping over the Results

This example uses dot notation.

It is possible to use your Query to rename the keys in your Results- doing this would require different dot notation. We'll look at this later.

For now, we'll be using the query below, which does not rename any keys. I've set per_page to 2, in order to make the example data Object shorter and easier to read.

Code:

query get_items_with_musical_names {
  records(
    page: 1
    per_page: 2
    filter: {
      table: { starts_with:  "webapp_"  }
      properties: {
        name: "name", contains: "music"
      }
    }
  ) {
    total_pages
    results {
      table
      properties
    }
  }
}  

Step 1) Output the Results as shown above

Step 2) Find the key which holds the main array of results

My Page returns the following results- don't worry- there's no need to read them in this form:

Running these results through a 3rd-party JSON parser gives me the data in a format which is much easier to read. We don't recommend any particular JSON parser, but if you're using a text editor there will normally be an extension available which does this.

The structure of the results here matches the results we see in the GraphQL playground. We're looking for the key which returns an array of results- this is indicated by the square bracket [ ]:

The dot notation to reach the results is:

{% graphql my_results = "get_items_with_musical_names" %}
{{my_results.records.results}}

Alternatively, you can always run your query in the GraphiQL Playground and work out the dot notation needed from the results shown in the middle-right panel. You'll just need to ignore the very top key in the results data: and use the variable from your graphql tag instead e.g. my_results :

Step 3) Implement a Liquid For Loop to loop over the results

{% graphql my_results = "get_items_with_musical_names" %}
{% for this in my_results.records.results %}
{% endfor %}

We loop over every item in the Results array. We create a variable called this with a scope which allows it to be accessed only inside each loop iteration. this contains all the data for that result.

Step 4) Output properties inside each Item's iteration

In this example, we'll output:

  • the table

  • An example property name

  • An example property webapp_field_1_2 . This is the second custom Field defined in the WebApp's structure on Starter Site.

We can now also bring in other Front End languages. I'll add some common HTML tags.

{% graphql my_results = "get_items_with_musical_names" %}
{% for this in my_results.records.results %}
  <h1>{{this.table}}</h1>
  <h2>{{this.properties.name}}</h2>
  <p>{{this.properties.webapp_field_1_2}}</p>
{% endfor %}

This gets me the following Results on the Page:

Outputting Layouts

You can use a Liquid include tag to output a Layout to display your results. The trick is to make sure that the data fits the same format as the layout is expecting.

Congratulations

You've reached the end of the first collection of our Learning GraphQL tutorials.

By now, you should be able to:

  • Set up a development environment to test GraphQL queries

  • Run GraphQL queries on a Siteglide Site

  • Understand and use GraphQL Pagination

  • Use GraphQL filters

New Tutorials will be added soon!

Next Time

There's no official challenge for this tutorial, because you probably want to experiment with adding queries to your Site.

In the next Tutorial, we'll look at using variables in your Queries to make them more dynamic. We'll look at how you can use variables:

  • In the GraphiQL playground

  • Using Liquid in a Page

Let's go!

You can learn more about this topic , as it works in the same way as displaying Collection Results in a Layout.

📋
Dot Notation here
About GraphQL
Dot Notation
Collections
here