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

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

HQL-TAG

By Vilva Athiban

HQL-TAG

An intro to hql-tag @Hasura community call

  • 99