HQL TAG : CLIENT SIDE QUERY CUSTOMIZATION

Vilva Athiban P B 

@vilvaathibanpb 

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

hql-cli:

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

Demo

hql-tag - https://github.com/product-ride/hql-tag

hql-cli - https://github.com/product-ride/hql-cli

Code Sandbox - 

https://codesandbox.io/s/hardcore-tdd-d9o1s

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

Roadmap

• 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

@vilvaathibanpb

Thank you