Can a rate limiter execute different functions?

[khoait]

Usually when an API server enforces rate limits, all api endpoints (CRUD) are affected.

Can we have a single rate limiter to track all CRUD api calls?

[ismaildasci]

Yes, TanStack Pacer supports this. You can use a single rate limiter instance and call it from different functions:

import { RateLimiter } from "@tanstack/pacer";

const apiLimiter = new RateLimiter({
  limit: 10,
  interval: 1000 // 10 requests per second
});

// All CRUD operations share the same limiter
async function createItem(data) {
  await apiLimiter.maybeExecute(() => fetch("/api/items", { method: "POST", body: JSON.stringify(data) }));
}

async function getItems() {
  await apiLimiter.maybeExecute(() => fetch("/api/items"));
}

async function updateItem(id, data) {
  await apiLimiter.maybeExecute(() => fetch("/api/items/" + id, { method: "PUT", body: JSON.stringify(data) }));
}

async function deleteItem(id) {
  await apiLimiter.maybeExecute(() => fetch("/api/items/" + id, { method: "DELETE" }));
}

The rate limiter tracks all calls regardless of which function triggered them. You can also use the queue-based approach with add() if you want requests to queue instead of being rejected when the limit is hit.

[khoait]

Awesome! Thank you!

[KevinVandy]

@khoait be aware that I think that the above answer might be AI halucinations. That's not correct syntax for TanStack Pacer

[khoait]

Yeah, I read the docs and only saw the rate limiter excecuting one function, hence this question.

[KevinVandy]

I'll add that TanStck Pacer wasn't designed to use the above suggestion. Passing a function directly to maybeExecute is an interesting pattern, but the above example isn't correct type-safe syntax as a fn wasn't even defined.

Apparently though, if you define it like this:

import { RateLimiter } from '@tanstack/react-pacer'

const apiLimiter = new RateLimiter(
  (fn: () => void) => {
    fn() //important!
  },
  {
    limit: 10,
    window: 1000, // 10 requests per second
  },
)

// All CRUD operations share the same limiter
async function createItem(data: any) {
  await apiLimiter.maybeExecute(() =>
    fetch('/api/items', { method: 'POST', body: JSON.stringify(data) }),
  )
}

async function getItems() {
  await apiLimiter.maybeExecute(() => fetch('/api/items'))
}

It can work.

I think I'd rather suggest users do something like this though:

const fetchRateLimiter = new RateLimiter(window.fetch, {
  limit: 10,
  window: 5000, // 10 requests per second
})

const sharedRateLimitedFetchFn =
  fetchRateLimiter.maybeExecute.bind(fetchRateLimiter)

async function updateItem(id: string, data: any) {
  await sharedRateLimitedFetchFn('/api/items/' + id, {
    method: 'PUT',
    body: JSON.stringify(data),
  })
}

async function deleteItem(id: string) {
  await sharedRateLimitedFetchFn('/api/items/' + id, { method: 'DELETE' })
}