DEV Community: Gabriel Ávila

Why You Should Cache More and Query Less

Gabriel Ávila — Mon, 23 Jun 2025 23:24:28 +0000

Still hitting the same API again and again?

It’s not just inefficient — it’s expensive. Slow performance, higher costs, and a worse experience for your users.

Let’s put a stop to that — starting with this article. :D

First you need to know Redis, long story short, it is an ultra-fast, in-memory key-value store — perfect for caching and reducing load on your backend.

There are some ways you can start.

If you are developing, I recommend to use with Docker.

To do so you can run on your CLI:

docker run -d --name redis-stack-server -p 6379:6379 redis/redis-stack-server:latest

That will start the Redis server. But seeing what’s actually stored is just as important. For that, use the full Redis Stack with a browser UI:

docker run -d --name redis-stack -p 6379:6379 -p 8001:8001 redis/redis-stack:latest

Now, if you go to your http://localhost:8001/redis-stack/browser

You'll find a handy dashboard where you can store, browse, and manage your Redis data visually:

To get started, install the redis package:

ppm i redis // or yarn, npm

Now, let’s set up a few types and interfaces to keep things clean and scalable.

We’ll start with a generic enum for standardizing responses:

Our enum looks like:

# generic.interface.ts
export enum StatusEnum {
  SUCCESS = 'success',
  ERROR = 'error'
}

Then, define the types and structure for our caching logic:

# cache.interface.ts
import { StatusEnum } from './generic.interface';

export type CacheCallbackType = Promise<{
  status: StatusEnum;
  data: any;
  error?: any;
}>;

export interface CacheInterface {
  key: string;
  callback: () => CacheCallbackType;
  configs?: {
    expirationInSeconds?: number;
    useUserId?: boolean;
  };
}

interface CacheReturnInterface {
  status: StatusEnum;
  data: any;
}

export type CacheReturnType = Promise<CacheReturnInterface>;

These interfaces will help keep our code typed, consistent, and easy to maintain as the project grows.

Next, let’s set up a helper class to handle Redis operations in a clean and reusable way.

import { createClient } from 'redis';

export default class RedisHelper {
  private static client = createClient({
    username: 'default',
    password: process.env.REDIS_PASSWORD,
    socket: {
      host: process.env.REDIS_URL,
      port: parseInt(process.env.REDIS_PORT)
    }
  });

  static async connect() {
    if (!this.client.isOpen) {
      await this.client.connect();
    }

    return this;
  }

  static async get(key: string) {
    await this.connect();
    const value = await this.client.get(key);

    if (!value) {
      return value;
    }

    return value;
  }

  static async set(
    key: string,
    value: any,
    expirationInSeconds: number = 3600
  ) {
    await this.connect();
    await this.client.json.set(key, '$', value);
    await this.client.expire(key, expirationInSeconds);

    return this;
  }

  static async del(key: string) {
    await this.connect();
    await this.client.del(key);
  }

  static async quit() {
    if (this.client.isOpen) {
      await this.client.quit();
    }
  }
}

We're using Redis' JSON commands (e.g., .json.set) to store structured data more intuitively. This gives us more flexibility than plain strings—especially when dealing with nested objects or arrays.

With this helper, we can:

Connect to Redis only when needed (lazy connection)
Set values with expiration
Get cached data easily
Delete keys
Gracefully close the connection with quit

This helper will handle caching for any kind of request—as long as the request is successful. It uses the RedisHelper we created to communicate with Redis.

In my case, I’m including support for user-based caching, by appending the user ID to the cache key. In your case, feel free to adapt this logic to suit your needs.

import {
  CacheInterface,
  CacheReturnType
} from '../../interfaces/cache.interface';
import { StatusEnum } from '../../interfaces/generic.interface';
// import getUserId  from '../default/userId';
import RedisHelper from './RedisHelper';

function getUserId () {
   return Math.random(); // use your logic here!
}

export default class CacheHelper {
  // checks if the cache is empty
  // then runs the callback function
  // and sets the cache with the result
  static async checkCache({
    key,
    callback,
    configs
  }: CacheInterface): CacheReturnType {
    const cache = await RedisHelper.get(key);
    const expirationInSeconds = configs?.expirationInSeconds || 3600;

    // only use userId in the key if specified in configs
    if (configs?.useUserId) {
      const userId = getUserId();
      key = `${key}:${userId}`;
    }

    if (cache) {
      return {
        status: StatusEnum.SUCCESS,
        data: cache
      };
    }

    try {
      const result = await callback();

      if (result.status === StatusEnum.ERROR) {
        return {
          status: StatusEnum.ERROR,
          data: result.data
        };
      }

      await RedisHelper.set(key, result.data, expirationInSeconds);

      return {
        status: StatusEnum.SUCCESS,
        data: result.data
      };
    } catch (error) {
      console.error('Error in checkCache:', error);

      return {
        status: StatusEnum.ERROR,
        data: null
      };
    }
  }

  // helper to always use userId in the key
  static async checkCacheWithId({
    key,
    callback,
    configs
  }: CacheInterface): CacheReturnType {
    return this.checkCache({
      key,
      callback,
      configs: {
        ...configs,
        useUserId: true
      }
    });
  }

  static async deleteCache(
    key: string,
    configs?: {
      useUserId?: boolean;
    }
  ): Promise<void> {
    if (configs?.useUserId) {
      const userId = getUserId();
      key = `${key}:${userId}`;
    }

    if (!key) {
      throw new Error('Key is required to delete cache');
    }

    try {
      await RedisHelper.del(key);
    } catch (error) {
      console.error('Error deleting cache:', error);
      throw error;
    }
  }

  static async deleteUserCache(key: string): Promise<void> {
    return this.deleteCache(key, { useUserId: true });
  }
}

This utility gives you full control over:

Reading from the cache
Writing to it if needed
Handling cache keys with or without user identifiers
Deleting cached entries easily

Oh, a tag in redis looks like this:

movies:user_123
user:123:profile
user:123:posts
user:123:notifications

Now that everything is set up, using the cache is simple and clean.

Here’s an example of how to cache a /categories API request based on user ID:

import CacheHelper from './helpers/cache/CacheHelper';
import { StatusEnum } from './interfaces/generic.interface';

api.post('/categories', async (_req, res) => {
  const data = await CacheHelper.checkCacheWithId({
    key: 'categories',
    callback: async (): CacheCallbackType => {
      const data = await Categories();

      if (data.error) {
        return {
          status: StatusEnum.ERROR,
          data: data.error
        };
      }

      return {
        status: StatusEnum.SUCCESS,
        data
      };
    }
  });

  if (data.status === StatusEnum.ERROR) {
    return res.status(500).send({ error: data.data });
  }

  return res.status(200).send(data.data);
});

✅ What’s happening here?

checkCacheWithId checks if there's already a cached version of the response for that specific user.
If there's no cache, it runs the callback (Categories()), saves the result, and returns it.
If there’s an error in the callback, it won’t be cached—and the error is returned instead.
The result is returned to the client, fast and clean.

Want to go a step further? You could abstract this into a middleware or use decorators (if you're working with a framework like NestJS).

Let me know if you'd like help with that next!

How to Embed User Preferences

Gabriel Ávila — Mon, 02 Jun 2025 23:12:10 +0000

An embedding isn’t just useful for search — it’s also a powerful way to represent user preferences.

Think about how a feed works, like on YouTube. How do you recommend content to someone who loves funny cat videos versus someone who’s into programming tutorials?

Each video usually has tags, right? We can convert those tags into embeddings — mathematical representations of the video’s content.

Once everything is represented as embeddings, we can calculate similarity scores between the user's interests and available content.

But here’s the catch: if a user interacts with multiple videos, how do we combine those interests into a single preference embedding?

The answer: use a decay technique.

This means that recent interactions weigh more, while older ones slowly lose influence over time.

The code is as simple as it sounds.

First, you’ll need a column to store the user’s preference embedding — basically, a vector that represents their tastes.
👉 If you don’t know how to create one, check my previous tutorial! 😄

Now, let’s talk about the decay factor. I usually keep it between 0.1 and 0.25, meaning that we preserve 90% to 75% of the current preferences and update the rest based on the user’s latest action.

💡 Tip: If it’s the user’s first time, just save the embedding as is — no decay needed.

Here’s the full code:

const decayFactor = 0.1;
const decayEmbedding = preferenceEmbedding.map((value, index) => {
  return value * (1 - decayFactor) + actionEmbedding[index] * decayFactor;
});

That’s it. Simple and effective.

Now, every time the user interacts with something — like watching a video or clicking on a product — you update their embedding using this formula.

Then, when they visit the feed, you simply run a similarity search based on their latest preferences.

A pro tip I highly recommend (and personally use) is to cache the user’s preference embedding using Redis, so you don’t need to fetch or compute it from scratch every time.

And guess what? That’ll be the topic of my next post.

See you soon, folks! 🚀

Vector Search in Action: Personalization with AI Embeddings

Gabriel Ávila — Tue, 27 May 2025 01:16:15 +0000

This tutorial uses Supabase + JS/TS, so having some basic experience with them will help.

Most of what I'll be explaining here, I developed on dissolutus.

To start, we need to have something for our users to search. In my case, it’s templates, so they can create their own posts.

It looks like this:

Basically, each of my templates needs a description.

And now our AI journey begins!

You can think of an embedding as how an AI model understands the difference between, say, a pen and a car.

So, an embedding is a vector, which is basically a long list of numbers. These numbers capture the meaning or essence of the text. The closer two vectors are, the more related their meanings are.

For example, if I search for “food promotion”, templates with a description such as “pizza” or “burger” would have higher similarities - because they are about food. But something like “work with us” would be far away.

What we need now is to transform our search term, let's say "Food promotion", into a vector and look for similar vectors in our table to find matching templates.

To do that, we need to install @huggingface/transformers:

pnpm i @huggingface/transformers

And now we can add this snippet and it will do the magic for us:

    const pipe = await pipeline('feature-extraction', 'Supabase/gte-small');

    const output = await pipe(searchText, {
      pooling: 'mean',
      normalize: true
    });

    const embedding = Array.from(output.data);

Something really important: you need to use the same model for both the search term and your table. Otherwise it will not be working.

Here, I'll be using Supabase/gte-small, it returns a vector with 384 dimensions. Vectors with fewer dimensions run faster queries and consume less RAM. Wanna learn more? Check this article created by the Supabase team.

We are generating the search embedding, and that's great.
But let's move to our database now.

We need to add to Postgres the extension pgvector.

You can do that by using the Supabase dashboard or running in the Postgres terminal/migration file:
CREATE EXTENSION IF NOT EXISTS vector;

And to run requests from Postgres, we need to:
CREATE EXTENSION IF NOT EXISTS pg_net;

The table templates is where I'll be storing my embedding.
So I run:
ALTER TABLE templates ADD COLUMN embedding vector(384);

When the admin user creates a new template we need a trigger, that calls a function and this functions calls another function (yep!) that generates our embedding.

Our function is:

create or replace function embed_server_row()
returns trigger
language plpgsql
as $$
declare
  content_column text = TG_ARGV[0];
  embedding_column text = TG_ARGV[1];
  timeout_milliseconds int = 5 * 60 * 1000;
begin
  perform
    net.http_post(
      url := supabase_url() || '/functions/v1/embed_server',
      headers := jsonb_build_object(
        'Content-Type', 'application/json'
      ),
      body := jsonb_build_object(
        'ids', jsonb_build_array(NEW.id),
        'table', TG_TABLE_NAME,
        'contentColumn', content_column,
        'embeddingColumn', embedding_column,
        'edgeKey', edge_key()
      ),
      timeout_milliseconds := timeout_milliseconds
    );

  return null;
end;
$$;

What this big boi here does is nothing more than getting the ids that were modified (created/updated) and calls the function to create the embedding to given table and cols (the col that will receive and the one that will be the base).

You ask what supabase_url is? It is like an "env", where we can store secrets.

You can learn more about vault here.

select vault.create_secret(
  '<api-url>', -- change here!
  'supabase_url'
);

And then you can:

create function supabase_url()
returns text
language plpgsql
security definer
as $$
declare
  secret_value text;
begin
  select decrypted_secret into secret_value from vault.decrypted_secrets where name = 'supabase_url';
  return secret_value;
end;
$$;

Now, we can create our trigger, I'll be creating for both updates and inserts.

-- add  trigger to embedd the action with the function embed
create trigger embed_templates_insert
  after insert on public.templates
  for each row
  when (new.content is not null)
  execute procedure embed_server_row('content', 'embedding');

-- when a update is made, the trigger will be executed
create trigger embed_templates_update 
  after update on public.templates
  for each row
  when (old.content is distinct from new.content)
  execute procedure embed_server_row('content', 'embedding');

Here we go to our edge function. Does not know what that means? Check this article.

As you can see the name is "embed_server_row", so we need a file with the same name.

In your import_map you should use:

{
       "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.21.0"
}

And our file will look something like this:

import { createClient } from "@supabase/supabase-js";
const model = new Supabase.ai.Session("gte-small");

const supabaseUrl = Deno.env.get("SUPABASE_URL");
const supabaseRoleKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY");

Deno.serve(async (req) => {
  if (!supabaseUrl || !supabaseRoleKey) {
    return new Response(
      JSON.stringify({
        error: "Missing environment variables.",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      }
    );
  }

  const { ids, table, contentColumn, embeddingColumn } = await req.json();

  if (!ids || !table || !contentColumn || !embeddingColumn) {
    return new Response(
      JSON.stringify({
        error: "Missing required parameters.",
      }),
      {
        status: 400,
        headers: { "Content-Type": "application/json" },
      }
    );
  }

  const supabase = createClient(supabaseUrl, supabaseRoleKey);

  const { data: rows, error: selectError } = await supabase
    .from(table)
    .select(`id, ${contentColumn}`)
    .in("id", ids);

  if (selectError) {
    return new Response(JSON.stringify({ error: selectError }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }

  for (const row of rows) {
    const { id, [contentColumn]: content } = row;

    if (!content) {
      console.error(`No content available in column '${contentColumn}'`);
      continue;
    }

    if (!id) {
      console.error(`No id available in column 'id'`);
      continue;
    }

    const output = (await model.run(content, {
      mean_pool: true,
      normalize: true,
    })) as number[];

    const embedding = JSON.stringify(output);

    if (!embedding) {
      console.error(`No embedding generated for id ${id}`);
      continue;
    }

    const { error } = await supabase
      .from(table)
      .update({
        [embeddingColumn]: embedding,
      })
      .eq("id", id);

    if (error) {
      console.error(
        `Failed to save embedding on '${table}' table with id ${id}`
      );

      console.error(error);
    }

    console.log(
      `Generated embedding ${JSON.stringify({
        table,
        id,
        contentColumn,
        embeddingColumn,
      })}`
    );
  }

  return new Response(null, {
    status: 204,
    headers: { "Content-Type": "application/json" },
  });
});

The base idea of this function and helpers I got from this repo.

Almost done!

Now when the user search something we need a last Postgres function that returns a similarity check.

It looks like this:

create or replace function match_table_embeddings(
  table_name text,
  embedding vector(384),
  match_threshold float
)
returns table (id uuid, similarity float)
language plpgsql
as $$
#variable_conflict use_variable
declare
  query text;
begin
  query := format(
    'select table_name.id, embedding <#> $1 as similarity
     from %I as table_name
     where embedding <#> $1 < -$2
     order by similarity;',
    table_name
  );

  -- Execute the query dynamically
  return query execute query using embedding, match_threshold;
end;
$$;

In your search function having the user embedding you can do something like this:

  const { data, error } = await supabase
      .rpc('match_table_embeddings', {
        table_name: 'creativehub_actions',
        embedding,
        match_threshold: 0.8
      })
      .select('id')
      .limit(LIMIT);

When it comes to the match_threshold, closer to 1, it will return exact similarities, and closer to 0, well, it may start hallucinating.

But there is more to it.

In the next post, I'll show how to tailor the user experience.

See you soon, folks!