Add ability to completely disable request throttling

[mvantellingen]

When using the storyblok-js-client in a server environment with a bit of traffic the storyblok-js-client causes significant slow downs due to request throttling. It should be possible to completely disable request throttling for performance (so not only changing the rateLimit setting).

For now we have created a fork which removes this functionality, see https://www.npmjs.com/package/@labdigital/storyblok-js-client but I would love to help get this option into the official client.

Note that while debugging the performance issue it also seems that the client creates quite some number of promises for requests, which also has impact on performance.

[rickvandermey]

It does have a huge performance improvement! However when we try the fork, it doesn't render anything on the server anymore. Something to keep in mind

[alvarosabu]

Hi @mvantellingen thanks for the feat request. Let me bring it up internally and keep you updated.

[Jonne]

@alvarosabu Any update on this? I'm also runnin into performance limitations because of this. Thanks! 🙏

[alvarosabu]

Hi @Jonne we are currently working on it. We are discussing to add a patch instead of waiting for v7 to release this. Will keep you posted here

[demeyerthom]

@alvarosabu any movement on this? I see v7 has come out already, so it does not look like it was part of these changes?

[imranolas]

Thanks for the patience on this 🙏 We recognise it's been nearly a year since this was first raised, and we appreciate the fork you've created in the meantime.

We definitely want to solve this throttling issue, but we're navigating some competing internal commitments. We're exploring automated client generation using OpenAPI, with the hope that throttling can be handled natively through rate limit headers rather than client-side logic.

Your fork approach is exactly what we'd recommend for teams facing this performance bottleneck right now. We'll keep this discussion prioritised as we work through our roadmap.

[johndetlefs]

Does this relate to the hanging promises error that's occurring when adding Storyblok to Shopify Hydrogen?

storyblok/storyblok-js-client#682 (comment)

I've been trying to figure out a way around this while still allowing preview editing, and it's causing lots of issues while working locally. Is this the same issue (so wait for the update), or should I log a separate issue referencing the old one?

[z0n]

There's now a ticket for this as we also ran into this issue (and spent a lot of time to debug it): #319

For now, we're using the fork mentioned in the OP like this:

import StoryblokClient, { ISbConfig } from '@labdigital/storyblok-js-client';
import type { SbSDKOptions } from '@storyblok/js';
import { storyblokInit } from '@storyblok/react';

import { NotImplemented } from '~/components/storyblok/NotImplemented';
import { StoryblokPage } from '~/components/storyblok/StoryblokPage';

interface ApiPluginOptions extends SbSDKOptions {
  apiOptions?: ISbConfig;
}

// Implement a custom api plugin as the official one has a bug with rate limiting: https://github.com/storyblok/monoblok/issues/319
export const apiPlugin = (options: ApiPluginOptions = {}) => {
  const { apiOptions } = options;

  if (!apiOptions || !apiOptions.accessToken) {
    console.error(
      'You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication',
    );
    return;
  }

  const storyblokApi = new StoryblokClient(apiOptions);
  return { storyblokApi };
};

export const initStoryblok = () => {
  const components = {
    page: StoryblokPage,
  };

  const storyblokAccessToken =
    typeof import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN === 'string'
      ? import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN
      : '';

  storyblokInit({
    accessToken: storyblokAccessToken,
    use: [apiPlugin],
    bridge: true,
    components,
    customFallbackComponent: NotImplemented,
    enableFallbackComponent: true,
  });
};

And in the root.tsx, we're then simply calling initStoryblok().

The apiPlugin function is basically just taken from here:

monoblok/packages/js/src/api.ts

Lines 4 to 16 in 948ce49

	const apiFactory: SbPluginFactory = (options = {}) => {
	const { apiOptions } = options;
	if (!apiOptions || !apiOptions.accessToken) {
	console.error(
	'You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication',
	);
	return;
	}
	const storyblokApi = new StoryblokClient(apiOptions);
	return { storyblokApi };
	};

[shabab477]

Any update on this ? We are running into a problem with throttling too but our needs are quite opposite. The issue is we have multiple build pipelines fetching from a single storyblok space consisting close to 1k stories as a statically built site working in parallel. Now having a delay of 0.3s configured as const value is proving a problem by reaching the rate limit of the space.

Having the rate limit configured as the max value does not help:

apiOptions: {
    rateLimit: 1000,
},

It would be helpful if something like @mvantellingen solution is added to the repo as done here:
https://github.com/labd/storyblok-js-client/blob/92caa6cdc103f09c8702ab1d198e965d53bffcff/src/index.ts#L134

This is a good starting point for our use case but could be even nicer if the client delay function adds a jitter:

monoblok/packages/js-client/src/utils.ts

Lines 46 to 48 in f3af69e

	export const delay = (ms: number): Promise<void> =>
	new Promise(res => setTimeout(res, ms));