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
![](https://media1.giphy.com/media/SMKiEh9WDO6ze/giphy.gif)
@vilvaathibanpb
Thank you
HQL-TAG
By Vilva Athiban
HQL-TAG
An intro to hql-tag @Hasura community call
- 356