Duplicated query for each section

IgorChalenko commented 1 year ago

Hello, found some strange behavior while engine load the page, each section and snippet have two same requests in database:

backend  | MONGODB | mongo:27017 req:351 conn:1:1 | db.find | STARTED | {"find"=>"locomotive_snippets", "filter"=>{"site_id"=>BSON::ObjectId('63ca70a0e994470008842af1'), "slug"=>"need_guidance_form"}, "$db"=>"db", "lsid"=>{"id"=><BSON::Binary:0x78120 type=uuid data=0x9c326c8701694bf9...>}}
backend  | MONGODB | mongo:27017 req:354 conn:1:1 | db.find | STARTED | {"find"=>"locomotive_snippets", "filter"=>{"site_id"=>BSON::ObjectId('63ca70a0e994470008842af1'), "slug"=>"need_guidance_form"}, "$db"=>"db", "lsid"=>{"id"=><BSON::Binary:0x78120 type=uuid data=0x9c326c8701694bf9...>}}

My pages: layouts/default:

<body class="page-{{page.slug}}">
  {% block 'main' %}
  {% endblock %}
  {% include 'footer' %}
  {{ 'main.bundle.js' | javascript_tag }}
</body>

index page:

{% extends 'layouts/default' %}
{% block 'main' %}
  {% section 'need_guidance_form' %}
  ...
  other sections
{% endblock %}

Update 19.02.2023

Section finder service called from two different classes/modules, first is FileSystem class and second still not found.

Any idea what's going on?

did commented 1 year ago

@IgorChalenko what's the liquid template behind {% section 'need_guidance_form' %} ?

IgorChalenko commented 1 year ago

Oh I'm sorry, 'need_guidance_form' is snippet not section, but there are not specific case in only one section, every sections in a page send query two times, here example of my section:

---
name: Info card
icon: header

settings:
- label: Theme
  id: theme
  type: select
  options:
  - label: Light
    value: light
  - label: Dark
    value: dark
  - label: Gray
    value: gray
- label: Flip content
  id: flip_content
  type: select
  options:
  - label: Left
    value: left
  - label: Right
    value: Right
- label: "Addition title"
  id: addition_title
  type: text
- label: "Title"
  id: title
  type: text
- label: "Description"
  id: description
  type: text
  html: true
- label: "Button 1 text"
  id: button1
  type: text
- label: "Button 1 link"
  id: button1_link
  type: text
- label: "Button 2 text"
  id: button2
  type: text
- label: "Button 2 link"
  id: button2_link
  type: text
- label: "Image"
  id: background_image
  type: image_picker
blocks: []

default:
  settings:
    addition_title: "Additional Title"
    title: "Info Section"
    description: "The element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions."
    background_image: "/samples/images/info-placeholder.jpg"
    button1: "Button1"
    button1_link: "#"
    button2: "Button"
    button2_link: "#"
    theme: light
    flip_content: right
---

<section data-theme="{{ section.settings.theme }}" class="py-3 lg:py-6 bg-bg100 theme-gray:bg-bg120 theme-dark:bg-bg900 theme-dark:text-txt100 relative z-10" {{ section.locomotive_attributes }}>
  <div class="container-full flex flex-col-reverse {% if section.settings.flip_content == 'left' or section.settings.flip_content == nil %}sm:flex-row lg:gap-[246px]{% else %}sm:flex-row-reverse lg:gap-[126px]{% endif %} gap-3 md:gap-6 justify-center sm:justify-between items-center">
    <div class="w-full sm:w-1/2 flex flex-col justify-center {% if section.settings.flip_content == 'right'%} lg:pr-[120px]{% endif %}">
      <p class="v-h-h200 text-txt400">
        {{ section.settings.addition_title }}
      </p>
      <h2 class="v-h-h700 mt-1">
        {{ section.settings.title }}
      </h2>
      <div class="v-p600 mt-2 text-txt500 theme-dark:text-txt400 wyswyg-wrapper">
        {{ section.settings.description }}
      </div>
      <div class="flex gap-1 mt-2 sm:mt-3">
        {% if section.settings.button1 and section.settings.button1 != '' %}
          <a href="{{ section.settings.button1_link }}" class="button brand md:size200">
            {{ section.settings.button1 }}
          </a>
        {% endif %}
        {% if section.settings.button2 and section.settings.button2 != '' %}
          <a href="{{ section.settings.button2_link }}" class="button {% if section.settings.theme == 'dark' %}secondary{% else %}secondary-light{% endif %} md:size200">
            {{ section.settings.button2 }}
          </a>
        {% endif %}
      </div>
    </div>
    <div class="w-full sm:w-1/2 flex items-center relative sm:h-[423px] md:h-[552px] lg:h-[600px] sm:sticky sm:top-3 self-start">
      {%  include 'resize_image' with
        image: section.settings.background_image
        className: "w-full h-full max-h-full sm:absolute object-cover rounded-large"
        alt: "info-card-image"
        multiSize: '600w=>x420;900w=>x552;1280w=>x600'
      %}
    </div>
  </div>
</section>

and mongodb log:

backend  | MONGODB | mongo:27017 req:26 conn:1:1 | db.find | STARTED | {"find"=>"locomotive_sections", "filter"=>{"site_id"=>BSON::ObjectId('63ca70a0e994470008842af1'), "slug"=>"info_card"}, "$db"=>"db", "lsid"=>{"id"=><BSON::Binary:0x78120 type=uuid data=0x57e52e2c48624827...>}}
backend  | MONGODB | mongo:27017 req:28 conn:1:1 | db.find | STARTED | {"find"=>"locomotive_sections", "filter"=>{"site_id"=>BSON::ObjectId('63ca70a0e994470008842af1'), "slug"=>"info_card"}, "$db"=>"db", "lsid"=>{"id"=><BSON::Binary:0x78120 type=uuid data=0x57e52e2c48624827...>}}

IgorChalenko commented 1 year ago

I found this: https://github.com/locomotivecms/steam/blob/6dec4add08a070f3220ee6ee4c15b7876ca55723/lib/locomotive/steam/liquid/tags/section.rb#L41 https://github.com/locomotivecms/steam/blob/6dec4add08a070f3220ee6ee4c15b7876ca55723/lib/locomotive/steam/liquid/tags/section.rb#L44 First section finder service called from file system class, and next line we find section again through section finder service, what a purpose for that behavior?

locomotivecms / steam

Duplicated query for each section #224