Vilva Athiban P B 


About Me 

  • JavaScript + React + GraphQL  = 👨‍💻@Omio, Berlin


  • Contributing to OSS @ Product ride (https://productride.com)


  • Creator of styled-wind and hql-tag


  • Twitter is where I store my tech updates - @vilvaathibanpb

@ Product ride

  • Building the next generation applications (Web & Mobile)
  • Programs for new products:
    • One month MVP Program
    • Ideation to Deployment program
  • Programs for existing products:
    • Setup User-Tracking Program
    • Fix technical SEO issues
    • Improve Performance
  • OSS and community-focused Organization
  • https://productride.com/

The Problem

Product ride tried helping people at times of Corona by building a free product


The stack: Apollo/React + Hasura


Power of Hasura: Query data based on field values directly from the Client


Problem: Readability and Elegance of the query

The Solution: HQL-TAG

A Hasura specific wrapper over 'graphql-tag'


Provides a shorthand and elegant way to query or sort data based on field values 


Access and modifies ASTs to customize queries



A hql-tag powered GraphiQL playground to test hql-tag compatible queries




The new Dimension 

Though hql-tag is Hasura specific, 


  • It opens up a new way of customization of queries on the client
  • Create organization-specific customizations over third party Graphql APIs
  • Migration between different backends can be made easily without changing/updating the entire codebase



  • Build a Babel plugin to avoid dependency of both graphql-tag and hql-tag in the bundle. (in progress)
  • Build a middleware version of the library
  • Add support for other libraries like React-SWR.
  • Ofcourse, optimize and make it better

Q&A time


Thank you


By Vilva Athiban


An intro to hql-tag @Hasura community call

  • 271