Query products using tag filter in Storefront GrpahQL API

Solved
New Member
5 0 0

Currently, we are using shopify-buy (shopify-buy/index.unoptimized.umd) npm package.  

We are fetching products using the below method. 

 

const productsQuery = client.graphQLClient.query(root => {
  root.addConnection("products", { args: { first: 50 } }, product => {
    product.add("tags"); // Add fields to be returned
    product.add("title");
    product.add("description");
    product.addConnection("variants", { args: { first: 50 } }, variant => {
      variant.add("id");
      variant.add("price");
      variant.add("image", opts => {
        opts.add("src");
      });
    });
  });
});

I would like to filter the products with dynamic tag values (Will be selected from Select tag). I have updated the above method to filter the tags like below:

 

const productsWithTagFilterQuery = client.graphQLClient.query((root) => {  
  root.addConnection("products", { args: { first: 50, query: "tag:{{tags}}" } }, product => {
    product.add("tags"); // Add fields to be returned
    product.add("title");
    product.add("description");
    product.addConnection("variants", { args: { first: 50 } }, variant => {
      variant.add("id");
      variant.add("price");
      variant.add("image", opts => {
        opts.add("src");
      });
    });
  });
});

Now I wanted to pass the tags from the custom-built query. How should I modify the graphQLClient.send method to pass the value of the tag.

 

 client.graphQLClient.send(productsWithTagFilterQuery).then(({ model, data }) => {
      console.log(model);

      );
    });    

 Any suggestions on doing this? 

 

 

 

0 Likes

Success.

Shopify Staff
Shopify Staff
240 33 37

Hey @rajeswari,

 

You can do something like this:

 

const tags = client.graphQLClient.variable('tags', 'String');
const productsQuery = client.graphQLClient.query('productsByTags', [tags], (root) => {
  root.addConnection('products', {args: {first: 50, query: tags}}, (product) => {
    product.add('title')
  })
})
​
client.graphQLClient.send(productsQuery, {tags: 'tag:tag1 OR tag:tag2'}).then(({ data, model }) => {
  console.log(data)
})
1 Like
Highlighted
New Member
5 0 0

Thanks. It is working.

0 Likes