I’ve always worked with REST APIs at the places I've worked. And, despite the fact that there’s a lot about REST that I like, I’ve always been a little jealous of devs who get to work with GraphQL. To me, the idea of being able to query my API and get what I want in one query feels right. I like the simplicity of it. When I think about the data I need for any part of my application, thinking about it in terms of a query makes sense. But, this just wasn’t the way the REST world worked. Then, the other day, I ran into Querty. Querty is an module that bills itself as a “new (old) paradigm for [REST] data access”. To the point, it’s a small (30 kb) library that allows you to get data from a REST API using SQL-like syntax. When I read that, it got my attention! npm So, I tried it out. And, I liked it. This article won’t be a tutorial on how to use Querty. The docs are pretty good and go into a lot of detail. Instead, I’ll show you what I think is the best part about it. Then, if you’re interested, you can , and learn more about how to use it. That’ll keep this a nice, short article and let you see if Querty is something you might like, too. check it out on npm Before I go any further, I should let you know that according to the author’s GitHub, Querty is in Beta (at the time of this writing). Ok, now to the good stuff!! Queries: Just the Data You Want, and More The main thing I love about Querty is the query. With it, you can use SQL to get the data you need from your REST API. Here’s a simplified example in pseudo JavaScript: SELECT const getMyData = async (id) => {

   const myData = await exec(
      `SELECT users.name,
       posts.title AS postTitle,
       todos.title,
       completed
     FROM users
     LEFT JOIN posts ON users.id = posts.userId
     LEFT JOIN todos ON users.id = todos.userId
     WHERE users.id = ${id}`
    );

}

// Some View
{userData.map((userData) => (
    <div>
      <ul>
       <li>{userData.name}, {userData?.postTitle}, {userData?.title}, {userData?.completed}</li>
      </ul>
    </div>);
} There’s a few things to notice here: Each table in the SQL query corresponds to a REST API endpoint. Querty supports column aliasing posts.title AS postTitle I can join data (yay!!!) In contrast, if I was using something like to get the same data, it might look something like this simplified pseudo JavaScript: fetch const getMyData = async (id) => {

   const userRes = await fetch(getUserById(id));
   const user = await userRes.json();
   const postsRes = await fetch(getPostsByUser(users.id));
   const posts = await postsRes.json();
   const todoRes = await fetch(getTodosByUser(users.id));
   const todos = await todoRes.json();
 
   // Create a dirty merge of the posts and todos
   let primary, secondary;
   if (posts.length > todos.length) {
     primary = posts;
     secondary = todos;
   } else {
     primary = todos;
     secondary = posts;
   }
   
   const userData = primary.reduce((data, item, idx) => {
      const merged = {...item, ...(secondary[idx] ? secondary[idx] : {}) }
      data.push(merged)
      return data;
   }, [])

}

// Some View
{userData.map((data, idx) => (
  <div>
   <ul>
     <li>{user.name}, {data?.postTitle}, {data?.title}, {data?.completed}</li>
   </ul>
  </div>);
} I know, that’s really messy, but you get the idea! For me, there’s a big difference between these two examples: I love how much cleaner, and focused the Querty code looks. I like how much simpler it is that Querty just gives me back the data I want, the way I want it. I don’t have to do a ton of data manipulation. The query itself helps me understand the code better. It’s kind of like having comments about your data right there in the code. Other SQL Commands Besides the query, you can also do , , and , and Querty supports two ways of using and . You can either use the normal SQL syntax or what’s called Object Syntax. It looks like this (copied from the docs): SELECT INSERT UPDATE DELETE INSERT UPDATE // Update using SQL-like Syntax
await exec(`UPDATE posts SET title = 'Alfred Schmidt', body = 'Frankfurt' WHERE id = 1`);

// Update using Querty Object syntax
await exec(`UPDATE posts WHERE id = 1`, { title: "Alfred Schmidt", body: "Frankfurt" }); This part is OK. I think it’s nice that you can just use one http client for everything. I don’t think I’d use the SQL or syntax much, but the Object syntax isn’t bad. UPDATE INSERT The Rest of Querty There are a few other nice things about Querty. I’ll mention them briefly here, and if you want to know more, the docs are a good place to go: Querty can work in the Browser or Node. You can write addons to extend Querty’s functionality. It supports working with multiple endpoints. The docs mention Cockatiel Policies. I haven’t worked with those, but they look interesting. You can cancel requests. Querty supports options for things like sending headers. fetch You can configure it to support managing expired auth tokens and auth token refresh. It supports query parameters and path mapping. If like me, you find Querty interesting, you can read more about it here: . Querty

Querty: Bringing the Power of SQL to REST APIs in your Web App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Beginner's Guide to HTTP - Part 3: Requests

A Beginners Guide to Learn Mock Fetching in jest

Beginners Guide to Fetch API

How to Fetch Data from APIs Using useEffect React Hook

How to Fetch Date with Promise.all and Async / Await

A Beginner's Guide to HTTP - Part 3: Requests

A Beginners Guide to Learn Mock Fetching in jest

Beginners Guide to Fetch API

How to Fetch Data from APIs Using useEffect React Hook

How to Fetch Date with Promise.all and Async / Await

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps