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 Alpha Release
      • â„šī¸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
  • Running the GraphQL sandbox
  • Choose an Environment (Site) to Connect to
  • Run the Sandbox
  • What does each panel in the GraphiQL Sandbox do?
  • A note on naming conventions
  • Your First Query
  • Step 1) Name your query
  • Step 2) Choose a Query type
  • Step 3) Ask for results
  • Step 4) Add Arguments
  • Step 5: Press play to fetch all results
  • CRM Users
  • Next Time

Was this helpful?

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

Tutorial 1 - Your First Query

PreviousTutorialsNextTutorial 2 - Pagination

Last updated 1 month ago

Was this helpful?

Hello WebApp! In Tutorial 1, we'll use Siteglide CLI to open the GraphQL sandbox. There, you'll write your first query and retrieve details about some webapp items.

Prerequisites

  • Create a new Site from the Flowbite Portal Site Template. We'll use this in the examples

  • - You'll need to understand how to open terminal on your machine and navigate to your Project's root folder. You'll need to have installed Siteglide-CLI and its dependency Node.js. You can't use GraphQL without Siteglide-CLI.

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

Introduction

In this first of the GraphQL Tutorials, you'll need to either create a new Starter Site, or open up a Starter Site you've created previously.

We'll use Siteglide CLI to open the GraphQL sandbox. There, you'll write your first query- which will ask for all the data on the entire Starter Site!

Running the GraphQL sandbox

The GraphQl sandbox is a place for testing Graph Queries. It has the additional benefits of giving you suggestions and documentation alongside your code.

When you open the sandbox- you'll be opening it with your chosen environment. This means you're picking a Siteglide Site to give the sandbox access to- it will be able to find database items from this Site.

For these tutorials, we strongly suggest you use a Starter Site- because then you'll have exactly the same data and it will be ready to go.

Choose an Environment (Site) to Connect to

Change directory into your project folder (create a folder first if you don't have one).

Then add your Site as an environment - the quickest way to do this is to copy the CLI command from your site in the Portal- or you can replace the --url and --email flags with your own. Add your Siteglide Admin password when prompted:

Run the Sandbox

The command for running the sandbox is (replace the stagingplaceholder with the name you chose in the previous step):

siteglide-cli gui staging

Success should look like this:

Click, Ctrl+click (if your machine allows), or copy the "GraphQL Browser" link into a browser. This will open the sandbox.

Short Method: If you want to save time and skip the step of opening the link, add the flag -o to automatically open the link after you run the command:

siteglide-cli gui my_env -o

Your First Look at the GraphiQL Sandbox

To start with a few important features are hidden. Click and drag up the QUERY VARIABLES panel from the bottom left and click the < Docs button in the top right. We'll come back to these later.

Click the "Toggle Explorer" button to open the Explorer wizard. This is a new tool which will make writing (non-deprecated) queries even easier.

You've now set up your GraphiQL sandbox!

What does each panel in the GraphiQL Sandbox do?

The Central Panel

This is where you write your Query

The Results Panel This is where the data will be displayed in JSON format after your query fetches it.

Query Variables Panel This is where you'll be able to simulate dynamic variable inputs when testing variables in your Query.

We'll cover this in a later Article.

Explorer Panel *NEW* This displays the GraphQL schema in the form of a "wizard". Tick the options you want to include and they will automatically be added to your query. This is the most user-friendly way to write queries for beginners (and possibly for the experienced GraphQL developers as well!). Note the explorer user-interface can't handle arrays of query language very well e.g. when filtering by multiple properties, even though it's valid GraphQL; when you hit a limitation like this, it's time to leave the explorer behind and write the code manually.

The other limitation is that it doesn't currently support older deprecated query and mutation types, if you have a need to use those.

Documentation Explorer Panel

This displays the available GraphQL schema as documentation. It works with nested levels, so each time you choose an option you can "click through" to the next level of options you can include.

This is less user-friendly than the new "Explorer" panel above, but can still be useful:

  • especially if you want to use a deprecated query like "customisations" (The only reason for using deprecated queries is that some support features like keyword search that are not supported on the more modern queries yet)

  • If you want to search the schema for features and understand which types are allowed

A note on naming conventions

platformOS sometimes changes the names of elements of their schema for the sake of better communication or as part of a functionality update. For example, models have been now renamed to records.

We are in the process of upgrading these docs to refer to records instead of models but in the meantime there may be some screenshots which continue to show the older terminology.

Your First Query

For your first query, we'll fetch every recordon the Site. A recordis a catch-all term for WebApp and Module items that we'll use in these tutorials. The term records does not refer to users, as these contain more core fields like email which set them apart and therefore they use a different query type: users.

In these tutorials, we'll break the process of building a query into steps. For each step we'll show you:

  • The code you need

  • Notes explaining the syntax of the code example in detail

  • A screenshot from the Explorer Panel, showing the checkbox needed to quickly insert this code *NEW*

We'll sometimes also include a screenshot of the Documentation Explorer Panel to illustrate it's use, but this depends on whether it seems useful or not!

Step 1) Name your query

Code:

query getEverything {
  
}

Notes:

  • The word query tells Graph we want to GET data, as opposed to modifying data.

  • getEverything is simply a name we have given the query. It is optional and has no functionality.

  • Curly braces { } have been added - these will contain an object containing the next level of instructions we will give the query. The next level from here is also known as RootQuery as it is the most fundamental level at which we choose which type of query we'll use.

Explorer: The "Explorer" wizard will add this for you if you type out a name here:

Step 2) Choose a Query type

The documentation panel on the right shows you the full range of query types available. Click RootQuery to see the options on this level.

You can also see a list of non-deprecated query types in the Explorer panel:

We'll be choosing recordsfor our first query. This will get us a list of records in the database.

Code:

query getEverything {
  records{
    
  }
}

Notes:

  • The new code goes within the first level of curly braces we opened in the previous step. Notice how our instructions are "nested" inside each other- like a "Russian doll", just as both the explorer panels show options nested inside each other.

  • We open another pair of curly braces inside records. We'll add further options here.

Explorer: Quickly implement this level in the Explorer Panel by selecting the records query type. This will also open the next level of options in the explorer:

Step 3) Ask for results

A GraphQL query doesn't give you results unless you ask for them. This helps it to stay as efficient as possible. We'll ask the query to pass back some key information about the records it finds, such as their table (this will help us identify which WebApp or Module the item belongs to) and then all of its properties (fields).

Next, we'll ask the query to return results and total_entries.

Code:

query getEverything {
  records {
    total_entries
    results {
      table
      properties
    }
  }
}

Notes:

  • total entries returns an integer, so we don't need to give it any more information.

  • results requires us to specify which fields we want to return with those results. We open a new pair of curly braces and choose fields from the docs. Siteglide doesn't use all of these fields, so some will return null . You can use properties to return all fields which have a value. table will return the name of the table the record belongs to (this was previously called model_schema_name).

Explorer:

Step 4) Add Arguments

You can press the "play" button to test your query:

Ours is not quite ready, and the error message in the middle-right Results Panel will tell us why:

{
  "errors": [
    {
      "message": "Field 'records' is missing required arguments: per_page",

Arguments are passed into a query to modify its behaviour. They always use round brackets ( ) syntax, just like JavaScript. Different types of queries will require some arguments, while allowing others as optional arguments.

This query requires that we specify how many records we would like to retrieve on each page of the results. This is to make sure the query isn't slowed down by retrieving too many records at once. We'll learn how to navigate multiple pages later, for now we'll ask for the first 20 records.

Code:

query get_all_records {
  records(
    per_page: 20
  ) {
    total_entries
    results {
      table
      properties
    }
  }
}

Notes:

  • per_page expects an integer, not a string, so we don't need quotes around 20

Explorer: You can set a value for per_page in Explorer.

Notice that the asterisk by the option in Explorer lets you know the property is mandatory.

In Explorer, there is a subtle colour scheme to help you differentiate between setting arguments and returning results:

  • Arguments are in purple

  • Results, and other returned properties are in dark blue

Step 5: Press play to fetch all results

If successful, you should see an object named "data" containing a tree of your results. Well done, you've written your first query! You've returned all records, or, in other words: WebApp and Module items.

You'll see there are actually more total_entries than the 20 results shown. That's because we're only viewing the first Page of the Results. We'll look at Pagination in the next Article.

CRM Users

If you want to get information on Siteglide CRM Users instead of WebApp or Module records, you can use the users query instead of the records query. The main difference is that users can return first_name, last_name, email etc. inside the results curly braces. See the explorer panel or the documentation panel to learn more.

Next Time

In the next Article we'll look at how GraphQL organises results into pages. We'll look at how to:

  • change page

  • change the number of items per page

  • output useful pagination metadata

Let's go!

📋
Siteglide-CLI
About GraphQL
Finding the CLI add command in Portal