website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
31min

Tutorial 3 - Filtering the Results

You shall not pass! This time, we'll look at how you can use filters to only return results based on specified rules.

Prerequisites

  • You have completed the Learning GraphQL tutorials 1 - 2. You can find the previous tutorial here
  • About GraphQL- optional- Read more about GraphQL and when it might be best used.

Introduction

models in the database have a model_schema_name which tells us which WebApp or Module they belong to. This time, we'll look at how you can use filters to only return results with a particular model_schema_name, or with a model_schema_name which matches a certain pattern. 

Returning The Gallery WebApp

The Starter Site comes packaged with a ready-built WebApp with the id of 1 and the name webapp_1. 

Step 1: Load the previous query

We'll return to our query from the previous tutorial, but this time, we'll rename it from get_all_models  to get_webapp_1 to reflect the different purpose we intend for it. We'll also be wanting to look at page 1 again. Code:

GraphQL
|

Explorer:

Document image

Step 2: Add the filter argument

Next, we'll add a filter argument: Code:

GraphQL
|

Notes:

  • As an argument for the models query, this goes inside the round brackets after models.
  • Like the other arguments, filter is followed by a colon :
  • We have more settings to choose next (filter is an object) so we add curly braces { } 

Explorer:

Document image



Step 3: Filter by the model_schema_name field

In this tutorial we'll choose the model_schema_name to apply the filter to, because we're looking for items with the model_schema_name  of webapp_1. Code:

GraphQL
|

Notes:

  • We've chosen model_schema_name as the only field graph will look at and apply the filter. In the next tutorial we'll explore using other fields, and filtering by more than one field at once.
  • This field also contains further options, so we use a colon : followed by curly braces { } to contain the next set of options.

Explorer:

Document image



Step 4: Define the filtering rule

We now have a choice about:

  1. How closely our value should match with the contents of a field before a match is returned. We'll use value (the exact value).
  2. The value we are matching against. We'll use webapp_1 .
GraphQL
|

Notes: 

  • value is a key and is followed by a colon : 
  • Our value "webapp_1" must be a String, so we wrap it in double quotes.

Documentation panel: 

  • Selecting ModelsFilterInput gives you options for different filtering rules you can apply:
Document image
  • After the colons : you can see the type of value expected for each of these keys. They are mostly strings String or arrays of strings [String]. This topic will be covered in more detail in later tutorials. Keep an eye out for the different data types expected by GraphQL in the meantime.

Explorer: When implementing this using the Explorer, the wizard will help you get the type of value correct. In this case, it provides you with quotes so that you can enter the value as a String:

Document image

Returning Items from the Blog Module

You can adjust the filter to return items from a specific Module item only. In this example, we'll specify module_3 which is the Blog Module. Code:

GraphQL
|

Explorer:

Document image

This should return Blog Posts from the Blog Module. 

Returning Form Submissions

You can adjust the filter to return Form Submissions from a specific Form only. In this example, we'll specify form_1 which is the Newsletter Sign Up Form. Code:

GraphQL
|

Explorer:

Document image



Challenge!

Introduction to GraphQL Challenges

In order to learn GraphQL, you'll need to start experimenting with what you've picked up from this tutorials. 

To help you do this, we'll now start to set you some challenges. These will ask you to tweak the examples we've given you so far and see if you can achieve the desired results. 

We'll always give you the answers to the challenge in the following Article, so don't worry if you get stuck. 

Your Challenge is to Write a Query which returns Items from all WebApps but not Module items

To carry out this challenge, you will need to create a second WebApp and add a couple of items in the Admin. By experimenting with the options in the documentation panel, see if you can filter the results so that:

  • your query returns all items with the model_schema_name of webapp_1 
  • your query returns all items with the model_schema_name of webapp_2
  • your query does not return items which start with module_ 
  • your query does not return Form submissions which start with form_

We'll go over the answer to this challenge in the next Article.

Next Time

We'll look at a possible solution to our challenge. After that, we'll continue to look at filtering queries in more detail, including:

  • filtering by different fields, or properties
  • filtering with different kinds of rules
  • using more than one filter at once
Updated 03 Mar 2021
Did this page help you?
Yes
No
UP NEXT
Tutorial 3 - Answers to the First Filtering Challenge
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Returning The Gallery WebApp
Step 1: Load the previous query
Step 2: Add the filter argument
Step 3: Filter by the model_schema_name field
Step 4: Define the filtering rule
Returning Items from the Blog Module
Returning Form Submissions
Challenge!
Introduction to GraphQL Challenges
Your Challenge is to Write a Query which returns Items from all WebApps but not Module items
Next Time