Looping metaobjects issue related with pagination

[MUTANGA]

Hello everyone,

Setting:
I have a metaobject definition populated with many entries (115). I have this following snippet that essentially produces a `<style>` by looping over the metaobject and for every value, it makes a CSS rule along the lines of

[data-color="{{ xxxx }}"] { background-color: {{ yyyy }} }

Here is the exact snippet:

<style class="test">
    {%- paginate shop.metaobjects.color_codes.values by 500 -%}  
        {%- for color_code_meta in shop.metaobjects.color_codes.values -%}
            {%- assign matching_color_hex_meta = color_code_meta.hex -%}
            {%- assign matching_color_value = color_code_meta.name -%}
            [data-color="{{- matching_color_value -}}"] { background-color: {{- matching_color_hex_meta -}} }
        {%- endfor -%}
    {%- endpaginate -%}
</style>

Expected result:

The snippet above works and outputs the expected results, example:

<style class="test">
[data-color="ANTHRACITE"] { background-color:#5b5656}
[data-color="APPLE"] { background-color:#cc6a80 }
[data-color="AQUA"] { background-color:#44d6dd }
... ... ...
... ...
...
</style>

Problem:
The snippet DOES NOT work when in a collection page and when `?page=2` (generally when > 1). It does not produce anything. It works when  `?page=1`. So my first guess is that this is a problem related with pagination. 

Then I made another test where instead of paginating by 500, i paginate by 50 and sure enough when the snippet runs at any collection that has `?page=larger than 1`, it brings the metaobject entries from the 2nd page of the metaobject (so results: 51 - 100), so the page parameter interferes with the pagination of the metaobject.

That explains why the snippet does not product anything when i paginate by 500.
It simply does not have anything to show in the second page of the metaobject entries. The entries themselves are 115 (and thus have only 3 pages since 50 is the limit of Shopify loops) 

Has anyone dealt with this before?

[MUTANGA]

I am going to provide an alternative solution that does not use Liquid but GraphQL.
This requires that you create a new App from Shopify admin and get your Storefront API Token.  

It also does not account for the case that you have more than 250 entries. In that case you would have to use cursor.

But if you want to use Liquid, the problem is still there.

<script>

function getMetaObjWhatevers() {

  var productQuery = () => `
    query {
      metaobjects(type: "YOUR_METAOBJ_TYPE_HERE", first: 250) {     
        edges {
          node {
            ... on Metaobject {
              fields {
                key
                type
                value
              }
            }
            handle
          }
        }    
      }
    }
  `;                 

  var options = {
    method: "post",
    headers: {
      "Content-Type": "application/graphql",
      "X-Shopify-Storefront-Access-Token": 'YOUR-API-TOKEN-HERE'
    },
    body: productQuery()
  };

  fetch('https://YOUR-STORENAME-HERE.myshopify.com/api/graphql.json', options)
    .then(res => res.json())
    .then(render => {
      var response = render;
      let stylez = '';
      let edges = response.data.metaobjects.edges;
      for(let i in edges) {
        let temp = `[data-color="${edges[i].node.fields[1].value}"] { background-color: ${edges[i].node.fields[0].value}} `;
        stylez += temp;
      }

      let style_el = document.createElement('style');
      style_el.classList.add('swatch-colorz');
      style_el.innerHTML = stylez;
      document.getElementsByTagName('head')[0].appendChild(style_el);
    }); 
  }
  getMetaObjWhatevers();	

</script>