npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hql-tag

v1.0.5

Published

A Hasura specific wrapper on graphql-tag for writing elegant queries

Downloads

17

Readme

hql-tag

CI Version Downloads/week License

hql-tag is a Hasura specific wrapper over graphql-tag. In Hasura GraphQL backend, we can query data with arguments directly without adding to backend schema using where argument and sort data using order_by argument. However, in a real-world query involving multiple where conditions on multiple arguments, the queries are not that readable.

hql-tag solves this issue by providing shorthand way of writing where and order_by arguments.

DEMO - Link to codesandbox to compare and play around with graphql-tag & hql-tag

Note: This library works fine with all the GraphQL Client frameworks that works with graphql-tag.

Installation

Install the dependencies. Please note, graphql & graphql-tag are peerDependencies

yarn add graphql graphql-tag hql-tag

or 

npm i graphql graphql-tag hql-tag

Usage

Imagine a clumsy query as below:

import gql from 'graphql-tag';

const clumsyHasuraQuery = gql`
  query getProductById($id: Int!) {
    product(
      limit: 10
      offset: 10
      where: { id: { _eq: $id }, quantity: { _gte: 10 }, type_id: { _eq: 10, _gte: 22, _lte: 5, _in: [72,73,74] } }
      order_by: {category: asc, description: desc}
    ) {
      category
      id
    }
  }
`;

The above query can be made more readable and elegant using hql-tag as below:

Note: It is recommended to import hql-tag as gql to get syntax highlighting and linting support from vscode extensions

import gql from 'hql-tag';

const elegantHasuraQuery = gql`
  query getProductById($id: Int!) {
    product(
      limit: 10
      offset: 10
      id_eq: $id
      quantity_gte: 10
      type_id_eq: 10
      type_id_gte: 22
      type_id_lte: 5
      type_id_in: [72, 73, 74]
      category_ord: asc
      description_order: desc
    ) {
      category
      id
    }
  }
`;

Steps to use:

  • Import gql from hql-tag instead of graphql-tag
  • Remove where and order_by arguments
  • To add where condition, add argument in the following format: ${argumentField}_${whereOperator}.
  • whereOperator can be one of [ "eq", "gte", "gt", "ilike", "in", "like", "lt", "lte", "neq", "nilike", "nin", "nlike", "similar", "nsimilar" ].
  • To add order_by condition, add argument in the following format: ${argumentField}_${orderByOperator}
  • orderOperator can be either ord(short form) or order.
  • After adding all arguments, you are done migrating

Visit hql-cli to enjoy GraphiQL support in single command

Roadmap

  • Babel plugin
  • Optimize bundle size
  • Apollo Middleware

Community

The creator of the library is always open to discussions/suggestions. Vilva Athiban Twitter