DEV Community: 0x4

🚀 Speed Up Your GraphQL Requests with Automatic Persisted Queries (APQ)

0x4 — Tue, 22 Jul 2025 19:34:20 +0000

If you're using GraphQL in production, you've probably heard about Automatic Persisted Queries (APQ). But what are they exactly, and why should you care?

In this post, we’ll walk through:

Why GET requests can improve GraphQL performance
What APQ is and how it works
How to implement APQ (with code!)
How the client knows when to send only the hash
How to handle fallbacks gracefully

📦 Why Use GET Requests in GraphQL?

GraphQL usually uses POST requests for sending queries. However, when the operation is a read (query), using GET has a huge benefit: HTTP caching via browsers, proxies, or CDNs.

But there’s a catch: GET requests pass the query in the URL, and URLs have size limits. So for large or complex queries, it can break.

🧠 Enter: Automatic Persisted Queries (APQ)

Instead of sending the full query in the URL or request body, you just send a hash of the query. The server:

Checks if it already knows this query
If yes, executes it and returns the result
If not, returns a PersistedQueryNotFound error
The client then retries, this time with the full query and the hash

This avoids sending the full query every time and enables GET requests with tiny URLs.

🔁 APQ Lifecycle Example

Here’s what happens step-by-step:

1. First Request (GET):

GET /graphql?extensions={
  "persistedQuery": {
    "version": 1,
    "sha256Hash": "abcd1234..."
  }
}&operationName=GetUser

2. Server Response:

{
  "errors": [
    {
      "message": "PersistedQueryNotFound"
    }
  ]
}

3. Client Retry (POST):

{
  "query": "query GetUser { user { id name } }",
  "extensions": {
    "persistedQuery": {
      "version": 1,
      "sha256Hash": "abcd1234..."
    }
  },
  "operationName": "GetUser"
}

4. Server stores the query and executes it. ✅

On the next identical request, the client only sends the hash!

⚙️ How Does the Client Know?

Most GraphQL clients (Apollo, urql) handle APQ automatically. You don’t need to write extra logic — just enable it in the config.

Example with Apollo Client:

import { createPersistedQueryLink } from "@apollo/client/link/persisted-queries";
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
import { sha256 } from "crypto-hash";

const link = createPersistedQueryLink({ sha256 }).concat(
  new HttpLink({ uri: "/graphql" })
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link
});

Apollo will:

First send a hash via GET
Retry with full query via POST if not found

🔥 Bonus: Benefits of Using APQ

Smaller payloads
Easier CDN caching
Increased performance for mobile clients
Optional: block non-whitelisted queries in production

🧯 What If the First Request Fails?

If the server responds with PersistedQueryNotFound, the client automatically retries with the full query — the user never sees the failure.

Still, for better DX, you can catch and track these retries for debugging or analytics.

That’s it! APQ is a clever pattern to boost performance and reduce bandwidth — and it’s surprisingly simple to adopt.

🧠 Have questions or tips? Let me know in the comments!

Understanding Methods of Primitives in JavaScript: A Deep Dive

0x4 — Mon, 27 Jan 2025 09:10:06 +0000

JavaScript often feels magical, especially when you can call methods on primitive values like strings or numbers. For example:

let text = "hello";
console.log(text.toUpperCase()); // "HELLO"

At first glance, it seems like primitives such as strings, numbers, or booleans are objects with methods. However, primitives are not objects, so how does this work? Let's dive into the fascinating mechanics behind this behavior.

What Are Primitives in JavaScript?

Primitives are the most basic data types in JavaScript. They include:

string
number
bigint
boolean
symbol
null
undefined

These types are immutable, lightweight, and not objects. Unlike objects, primitives do not inherently have methods or properties. Yet, you can still use methods like toUpperCase() on strings or toFixed() on numbers. How?

The Magic: Wrapper Objects

When you call a method on a primitive, JavaScript temporarily wraps the primitive in a corresponding object type called a wrapper object. These include:

String for strings
Number for numbers
Boolean for booleans
Symbol for symbols

This process enables primitives to behave like objects for the duration of the method call.

Example

let num = 42;
console.log(num.toFixed(2)); // "42.00"

Under the Hood:

JavaScript creates a temporary Number object for the primitive 42:

   let temp = new Number(42);

The toFixed(2) method is called on this temporary object:

   temp.toFixed(2); // "42.00"

The temporary object is discarded, and the result ("42.00") is returned.

This process is seamless and invisible to the developer.

Lifecycle of a Temporary Wrapper Object

When you call a method on a primitive:

Creation: JavaScript creates a temporary wrapper object using the corresponding constructor (e.g., String, Number).
Execution: The method is executed on this temporary object.
Destruction: The wrapper object is discarded immediately after the method call, leaving the primitive value unchanged.

This ensures that primitives remain lightweight and immutable while still allowing object-like behavior.

Optimization by JavaScript Engines

Modern JavaScript engines (like V8) optimize the process of wrapping primitives to ensure minimal performance overhead. Techniques such as inline caching and hidden classes streamline method lookups and reduce unnecessary object creation.

For example, instead of creating and destroying a wrapper object every time, engines might reuse internal representations or skip object creation altogether when possible.

Null and Undefined: The Exceptions

The primitives null and undefined do not have corresponding wrapper objects. As a result, attempting to call methods on them will throw an error:

let value = null;
console.log(value.toString()); // TypeError: Cannot read properties of null

Always ensure that variables are not null or undefined before calling methods.

Have you encountered unexpected behavior when working with primitives? Share your experiences in the comments below!

Do You Know About Transpiling?

0x4 — Thu, 09 Jan 2025 09:07:02 +0000

Transpiling is the process of converting code from one language or advanced version into an older version to make it compatible with older environments or browsers. For instance, if you write code using modern JavaScript (like ES6), the transpiler will convert it into ES5 code so that it can be used by older browsers.

🎯 Why Do We Need Transpiling?

Support for Older Browsers: Older browsers might not support some of the new features in JavaScript. Example: If you write code using let and const (which are new in ES6), an older browser might not recognize them. After transpiling, the code is converted into var, which is supported by older browsers.

   // ES6
   let x = 10;
   const y = 20;

   // After transpiling to ES5
   var x = 10;
   var y = 20;

Improvements in Programming Languages: We can use new features in JavaScript like async/await or even TypeScript, which adds extra capabilities. Example: If you write code using async/await in ES6, older browsers can’t handle this feature. But after transpiling, it gets converted into Promises, which are supported by all browsers.

   // ES6 with async/await
   async function fetchData() {
       const response = await fetch('https://jsonplaceholder.typicode.com/posts');
       const data = await response.json();
       console.log(data);
   }

   // After transpiling to ES5
   function fetchData() {
       return fetch('https://jsonplaceholder.typicode.com/posts')
           .then(response => response.json())
           .then(data => console.log(data));
   }

Making Developers’ Work Easier: Tools like React and TypeScript offer better and safer ways to write code. Example: In React, we can use JSX, but browsers don’t support JSX directly, so we use Babel to transpile it into regular JavaScript.

   // JSX in React
   const element = <h1>Hello, world!</h1>;

   // After transpiling to regular JavaScript
   const element = React.createElement('h1', null, 'Hello, world!');

Conclusion:

Transpiling helps us write code faster and more flexibly without facing issues with old browsers or environments that don’t support certain features.

💡 Have you used Transpiling in your projects before? Share your experiences with us!