Your command center to manage instances, permissions and billing.
Instances
An Instance is a virtual server that stores data and runs your application code.
Marketplace
Hosts applications, tools, and various files that you can download and install into an Instance.
Partners
Partners are experts in designing, building, and maintaining apps on Insites.
Support
Contact Insites Support for bugs, feature requests, and software development help.
Instantly available virtual server with built-in features for your entire team.
CRM
CRM helps manage relationships with customers, suppliers, and third parties efficiently.
Assets
Insites enables you to upload and manage files such as images, and documents using Assets.
CMS
Manage your application content with ease via no-code builders.
Forms
Creating forms for users to input data into the system.
Pipelines
Your instance includes 'Pipelines' to manage opportunities by creating relevant stages.
Permissions
Manage user permissions and security for your application.
Data
Insites lets users view, create, and manage databases and content via the Instance Admin.
Ecommerce
The Insites Ecommerce module provides complete management of ecommerce activities.
Locator
The Locator lets you integrate your instance with Google Maps and customize it as you wish.
Events
Insites Events lets you manage schedules, tickets, and sponsorship on your instance.
API
Integrate with any tool or platform with bespoke Endpoints.
AI alpha
Take advantage of the latest AI technology with your data.
A cohesive set of guidelines, patterns, and assets for a consistent, user-centered design.
Design System Overview
The Insites design system is a collection of reusable components, guided by clear standards.
Component Hierarchy
Learn how to customize components and how to structure your designs so they inherit attributes.
Font Icons
A full suite of font icons to use across your project within menus, buttons and quick links.
Color Styles
Figma color styles represent variables for Insites components, enabling quick customization.
Build blazing-fast, consistent user interfaces with our web component library.
General
A wide variety or general use components such as buttons, carousel, gallery, headings, and loaders.
Layout
Useful layout components such as an accordion, backdrop, drawer, headers, modals, and more.
Data Entry
Collect data with components that include card select, checkbox, inputs, sliders, and editors.
Data Display
Create engaging interfaces with components such as Kanban boards, charts, tables, and timelines.
Tutorials, references, and examples on how to build modern web applications on Insites.
Development
Covers key topics for setting up and maintaining web applications on Insites.
Modules
Modules enable code reuse and sharing while protecting creators' intellectual property.
Pages and Layouts
Learn how to implement pages and rendering content on your Instance.
Databases and Users
Discover how to create custom data models, import/export data and manage users.
The Insites CLI Tool helps you deploy configuration
files and assets to your Insites Instance.
Get Started
Guides you through the requirements and steps to install and start using the Insites CLI Tool.
Commands and Options
Learn the commands and options for managing configurations in the Insites CLI.
Graphical User Interface
Discover how using the GUI can enhance your workflow by simplifying complex processes.
Code Linting
Automatically check your codebase for programmatic and stylistic errors when deploying.
GraphQL
A data query and manipulation language that allows you to specify the data you require.
Liquid
Liquid is a template language for creating dynamic pages, content and configurations.
API Docs
Learn about the functionalities and structure of the inbuilt API Endpoints of your instance.
Web Applications
Discover how to create your web application with step by step guides and helpful examples.
Your command center to manage instances, permissions and billing.
Instances
An Instance is a virtual server that stores data and runs your application code.
Marketplace
Hosts applications, tools, and various files that you can download and install into an Instance.
Partners
Partners are experts in designing, building, and maintaining apps on Insites.
Support
Contact Insites Support for bugs, feature requests, and software development help.
Instantly available virtual server with built-in
features for your entire team.
CRM
CRM helps manage relationships with customers, suppliers, and third parties efficiently.
Assets
Insites enables you to upload and manage files such as images, and documents using Assets.
CMS
Manage your application content with ease via no-code builders.
Forms
Creating forms for users to input data into the system.
Pipelines
Your instance includes 'Pipelines' to manage opportunities by creating relevant stages.
Permissions
Manage user permissions and security for your application.
Data
Insites lets users view, create, and manage databases and content via the Instance Admin.
Ecommerce
The Insites Ecommerce module provides complete management of ecommerce activities.
Locator
The Locator lets you integrate your instance with Google Maps and customize it as you wish.
Events
Insites Events lets you manage schedules, tickets, and sponsorship on your instance.
API
Integrate with any tool or platform with bespoke Endpoints.
AI alpha
Take advantage of the latest AI technology with your data.
A cohesive set of guidelines, patterns, and assets for a consistent, user-centered design.
Design System Overview
The Insites design system is a collection of reusable components, guided by clear standards.
Component Hierarchy
Learn how to customize components and how to structure your designs so they inherit attributes.
Font Icons
A full suite of font icons to use across your project within menus, buttons and quick links.
Color Styles
Figma color styles represent variables for Insites components, enabling quick customization.
Build blazing-fast, consistent user interfaces with our web component library.
General
A wide variety or general use components such as buttons, carousel, gallery, headings, and loaders.
Layout
Useful layout components such as an accordion, backdrop, drawer, headers, modals, and more.
Data Entry
Collect data with components that include card select, checkbox, inputs, sliders, and editors.
Data Display
Create engaging interfaces with components such as Kanban boards, charts, tables, and timelines.
Tutorials, references, and examples on how to build modern web applications on Insites.
Development
Covers key topics for setting up and maintaining web applications on Insites.
Modules
Modules enable code reuse and sharing while protecting creators' intellectual property.
Pages and Layouts
Learn how to implement pages and rendering content on your Instance.
Databases and Users
Discover how to create custom data models, import/export data and manage users.
The Insites CLI Tool helps you deploy configuration
files and assets to your Insites Instance.
Get Started
Guides you through the requirements and steps to install and start using the Insites CLI Tool.
Commands and Options
Learn the commands and options for managing configurations in the Insites CLI.
Graphical User Interface
Discover how using the GUI can enhance your workflow by simplifying complex processes.
Code Linting
Automatically check your codebase for programmatic and stylistic errors when deploying.
GraphQL
A data query and manipulation language that allows you to specify the data you require.
Liquid
Liquid is a template language for creating dynamic pages, content and configurations.
API Docs
Learn about the functionalities and structure of the inbuilt API Endpoints of your instance.
Web Applications
Discover how to create your web application with step by step guides and helpful examples.
Your command center to manage instances, permissions and billing.
Instances
An Instance is a virtual server that stores data and runs your application code.
Marketplace
Hosts applications, tools, and various files that you can download and install into an Instance.
Partners
Partners are experts in designing, building, and maintaining apps on Insites.
Support
Contact Insites Support for bugs, feature requests, and software development help.
Instantly available virtual server with built-in features for your entire team.
CRM
CRM helps manage relationships with customers, suppliers, and third parties efficiently.
Assets
Insites enables you to upload and manage files such as images, and documents using Assets.
CMS
Manage your application content with ease via no-code builders.
Forms
Creating forms for users to input data into the system.
Pipelines
Your instance includes 'Pipelines' to manage opportunities by creating relevant stages.
Permissions
Manage user permissions and security for your application.
Data
Insites lets users view, create, and manage databases and content via the Instance Admin.
Ecommerce
The Insites Ecommerce module provides complete management of ecommerce activities.
Locator
The Locator lets you integrate your instance with Google Maps and customize it as you wish.
Events
Insites Events lets you manage schedules, tickets, and sponsorship on your instance.
API
Integrate with any tool or platform with bespoke Endpoints.
AI alpha
Take advantage of the latest AI technology with your data.
A cohesive set of guidelines, patterns, and assets for a consistent, user-centered design.
Design System Overview
The Insites design system is a collection of reusable components, guided by clear standards.
Component Hierarchy
Learn how to customize components and how to structure your designs so they inherit attributes.
Font Icons
A full suite of font icons to use across your project within menus, buttons and quick links.
Color Styles
Figma color styles represent variables for Insites components, enabling quick customization.
Build blazing-fast, consistent user interfaces with our web component library.
General
A wide variety or general use components such as buttons, carousel, gallery, headings, and loaders.
Layout
Useful layout components such as an accordion, backdrop, drawer, headers, modals, and more.
Data Entry
Collect data with components that include card select, checkbox, inputs, sliders, and editors.
Data Display
Create engaging interfaces with components such as Kanban boards, charts, tables, and timelines.
Tutorials, references, and examples on how to build modern web applications on Insites.
Development
Covers key topics for setting up and maintaining web applications on Insites.
Modules
Modules enable code reuse and sharing while protecting creators' intellectual property.
Pages and Layouts
Learn how to implement pages and rendering content on your Instance.
Databases and Users
Discover how to create custom data models, import/export data and manage users.
The Insites CLI Tool helps you deploy configuration
files and assets to your Insites Instance.
Get Started
Guides you through the requirements and steps to install and start using the Insites CLI Tool.
Commands and Options
Learn the commands and options for managing configurations in the Insites CLI.
Graphical User Interface
Discover how using the GUI can enhance your workflow by simplifying complex processes.
Code Linting
Automatically check your codebase for programmatic and stylistic errors when deploying.
GraphQL
A data query and manipulation language that allows you to specify the data you require.
Liquid
Liquid is a template language for creating dynamic pages, content and configurations.
API Docs
Learn about the functionalities and structure of the inbuilt API Endpoints of your instance.
Web Applications
Discover how to create your web application with step by step guides and helpful examples.
Your command center to manage instances, permissions and billing.
Instances
An Instance is a virtual server that stores data and runs your application code.
Marketplace
Hosts applications, tools, and various files that you can download and install into an Instance.
Partners
Partners are experts in designing, building, and maintaining apps on Insites.
Support
Contact Insites Support for bugs, feature requests, and software development help.
Instantly available virtual server with built-in
features for your entire team.
CRM
CRM helps manage relationships with customers, suppliers, and third parties efficiently.
Assets
Insites enables you to upload and manage files such as images, and documents using Assets.
CMS
Manage your application content with ease via no-code builders.
Forms
Creating forms for users to input data into the system.
Pipelines
Your instance includes 'Pipelines' to manage opportunities by creating relevant stages.
Permissions
Manage user permissions and security for your application.
Data
Insites lets users view, create, and manage databases and content via the Instance Admin.
Ecommerce
The Insites Ecommerce module provides complete management of ecommerce activities.
Locator
The Locator lets you integrate your instance with Google Maps and customize it as you wish.
Events
Insites Events lets you manage schedules, tickets, and sponsorship on your instance.
API
Integrate with any tool or platform with bespoke Endpoints.
AI alpha
Take advantage of the latest AI technology with your data.
A cohesive set of guidelines, patterns, and assets for a consistent, user-centered design.
Design System Overview
The Insites design system is a collection of reusable components, guided by clear standards.
Component Hierarchy
Learn how to customize components and how to structure your designs so they inherit attributes.
Font Icons
A full suite of font icons to use across your project within menus, buttons and quick links.
Color Styles
Figma color styles represent variables for Insites components, enabling quick customization.
Build blazing-fast, consistent user interfaces with our web component library.
General
A wide variety or general use components such as buttons, carousel, gallery, headings, and loaders.
Layout
Useful layout components such as an accordion, backdrop, drawer, headers, modals, and more.
Data Entry
Collect data with components that include card select, checkbox, inputs, sliders, and editors.
Data Display
Create engaging interfaces with components such as Kanban boards, charts, tables, and timelines.
Tutorials, references, and examples on how to build modern web applications on Insites.
Development
Covers key topics for setting up and maintaining web applications on Insites.
Modules
Modules enable code reuse and sharing while protecting creators' intellectual property.
Pages and Layouts
Learn how to implement pages and rendering content on your Instance.
Databases and Users
Discover how to create custom data models, import/export data and manage users.
The Insites CLI Tool helps you deploy configuration
files and assets to your Insites Instance.
Get Started
Guides you through the requirements and steps to install and start using the Insites CLI Tool.
Commands and Options
Learn the commands and options for managing configurations in the Insites CLI.
Graphical User Interface
Discover how using the GUI can enhance your workflow by simplifying complex processes.
Code Linting
Automatically check your codebase for programmatic and stylistic errors when deploying.
GraphQL
A data query and manipulation language that allows you to specify the data you require.
Liquid
Liquid is a template language for creating dynamic pages, content and configurations.
API Docs
Learn about the functionalities and structure of the inbuilt API Endpoints of your instance.
Web Applications
Discover how to create your web application with step by step guides and helpful examples.
This guide discusses loading related records while avoiding n+1 queries. These types of queries slow down the loading process because displaying each database item produces a request for another.
This is an advanced tutorial. To follow it, you must understand basic Insites concepts, the topics in the Tables and Database Fields. For testing, you must be acquainted with measuring the execution time of Liquid code fragments using the
The sample scenario in this guide walks you through two approaches to demonstrate the difference between the naive and the recommended approach to loading related records.
Use the recommended approach when implementing related records. That is, request data from a related record within a GraphQL query.
Loading related records in this demonstrative scenario is a five-step process:
The data schema in this scenario consists of two records:
app/schema/company.yml
app/schema/programmer.yml
The goal is to load data from the
Programmers:
title | company_id | |
---|---|---|
programmer-1@example.com | junior | 238415 |
programmer-2@example.com | middle | 238416 |
programmer-3@example.com | senior | 238417 |
programmer-7@example.com | senior | 238421 |
Companies:
id | name | url |
---|---|---|
238415 | Company #2 | company-2.com |
238416 | Company #3 | company-3.com |
238417 | Company #4 | company-4.com |
238421 | Company #8 | company-8.com |
Result collection:
programmer.email | programmer.title | company.name | company.url |
---|---|---|---|
programmer-1@example.com | junior | Company #2 | company-2.com |
programmer-2@example.com | middle | Company #3 | company-3.com |
programmer-3@example.com | senior | Company #4 | company-4.com |
programmer-7@example.com | senior | Company #8 | company-8.com |
Use two GraphQL queries for this approach:
app/graphql/programmers.grapqhl
app/graphql/company.graphql
While displaying the programmer collection — for each programmer record — fetch the related company record using the
Use the time_diff Liquid filter to test the naive approach. The quantitative results are displayed in the table below:
overall | |
---|---|
benchmark-n+1 | 1,236.169 |
1,223.485 | |
1,418.733 | |
1,216.547 | |
1,314.053 |
Please visit the documentation about Measuring the Execution Time of Liquid Code to learn how to set up tests for measuring code runtime.
To avoid n+1 queries, request company data within the
The
Your GraphQL query would look like this after updating:
Update the
app/views/pages/programmers/index.liquid
Test the second approach using the same measurement method. The results are as follows:
overall | |
---|---|
benchmark-record | 122.504 |
160.885 | |
134.064 | |
160.051 | |
131.056 |
Observe that requesting data from the related record within the GraphQL query delivers results around ten times faster than the previous method outlined in Step 3. The n+1 queries in the naive approach slow down the process because displaying each database item produces a request for another database item.
Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.