Global Objects with data fetching

[AsadCSE]

Hi, first of all I'm new to templating, I'm having problem understanding the following code in context of Shopify.

{% assign product = all_products['product_handle'] %}

I have seen Shopify templates are using this code to query the global object. As we are passing down objects to a tpl to be parsed and rendered, it's hard for me to believe that shopify is exposing all the data related to products, collections, cart... in their global object for parsing from the beginning . As this would significantly drop the performance. Is there a way for fetching data from the database when the object is used and then parse and render? Or am I missing something to understand? please let me know. Thanks in advance.

[pdehaan]

I'm not familiar w/ Shopify APIs, but "fetching data from a database when the object is used" could be done with something like an async filter:

import { Liquid } from "liquidjs";

const fetchCache = {};

const engine = new Liquid();
engine.registerFilter("fetchProduct", async (productId) => {
  if (productId in fetchCache) {
    // console.info(`cache hit: ${productId}`);
    return fetchCache[productId];
  }
  const res = await fetch(`https://haveibeenpwned.com/api/v3/breach/${productId}`).then(r => r.json());
  fetchCache[productId] = res;
  // console.info(`caching: ${productId}`);
  return res;
});
const tpl = engine.parse(`
{%- assign breach = productId | fetchProduct -%}

Name={{ breach.Name }}
Description={{ breach.Description }}
`);
engine.render(tpl, { productId: "LinkedIn" }).then(console.log);

OUTPUT

Name=LinkedIn
Description=In May 2016, <a href="https://www.troyhunt.com/observations-and-thoughts-on-the-linkedin-data-breach" target="_blank" rel="noopener">LinkedIn had 164 million email addresses and passwords exposed</a>. Originally hacked in 2012, the data remained out of sight until being offered for sale on a dark market site 4 years later. The passwords in the breach were stored as SHA1 hashes without salt, the vast majority of which were quickly cracked in the days following the release of the data.

[AsadCSE]

@pdehaan Thank you for your reply. What i'm trying to achieve is something like this

const { Liquid } = require('liquidjs')
const engine = new Liquid()

engine.registerTag('collections', {
    parse: function(tagToken) {
        this.key = tagToken.args.replace("['","").replace("']","")  
    },
    render: async function(context, emitter) {
        const res = await fetch(`https://haveibeenpwned.com/api/v3/breach/${this.key}`)
        context.globals.collections = {[this.key]: await res.json()}
    }
  })

  engine.parseAndRender(`
    {% collections['Linkedin'] %}
    {{collections['Linkedin'].Description}}
  `).then(console.log)

Outputs:

In May 2016, <a href="https://www.troyhunt.com/observations-and-thoughts-on-the-linkedin-data-breach" target="_blank" rel="noopener">LinkedIn had 164 million email addresses and passwords exposed</a>. Originally hacked in 2012, the data remained out of sight until being offered for sale on a dark market site 4 years later. The passwords in the breach were stored as SHA1 hashes without salt, the vast majority of which were quickly cracked in the days following the release of the data.

But my approach is at least having these two problems,

1. I have to call the collection tag first to make collections['Linkedin'] available from the next line. (please note: I am bound to use "collections['Linkedin']" format). But i'm trying to achieve some way to call and assign at the same time like

{% assign data = collections['Linkedin'] %}
{{data.Name}}

2. though I'm using "globals" here to store data but it seems like a overkill to me. Is there any other context like "local context" that i can dispose after I have finished parsing and rendering?

[jg-rp]

Hi,

Both Shopify/Liquid and LiquidJS support drops (as in "drop of liquid"). Drops are objects that expose their methods as liquid properties. The special liquidMethodMissing() method is called if a method is not implemented for a given key.

import { Liquid, Drop } from "liquidjs";

class CollectionDrop extends Drop {
  #fetchCache = {};

  async liquidMethodMissing(key) {
    if (!(key in this.#fetchCache)) {
      this.#fetchCache[key] = await fetch(
        `https://haveibeenpwned.com/api/v3/breach/${key}`
      ).then((r) => r.json());
    }
    return this.#fetchCache[key];
  }
}

const engine = new Liquid();

const template = `\
{{ collection['Linkedin'].Name }}
{{ collection['Linkedin'].Description }}
`;

engine
  .parseAndRender(template, { collection: new CollectionDrop() })
  .then(console.log);

There's an open issue (#592) regarding the lack of documentation for drops. You can find some examples in the drop test suite.

liquidjs/test/integration/drop/drop.ts

Lines 19 to 27 in 1380ac9

	class PromiseDrop extends Drop {
	private name = Promise.resolve('NAME')
	public async getName () {
	return 'GET NAME'
	}
	public async liquidMethodMissing (key: string) {
	return key.toUpperCase()
	}
	}

[AsadCSE]

@jg-rp This enlightens me and solves the problem. Thanks a lot.