Nuxt - Expose all features of useAsyncData in useAsyncStoryblok

[michaelpumo]

I'm using the recommended way to integrate Storyblok + Nuxt via useAsyncStoryblok composable.

All is working great but once I use resolve_relations, I am getting back everything from each relation (as is expected) which is a gigantic payload (when I only really need a few fields).

Typically, if I was doing this myself with useAsyncData, I would use transform in the options object to trim the payload down:
https://nuxt.com/docs/api/composables/use-async-data#params

Since useAsyncStoryblok is a wrapper around Nuxt's useAsyncData, is there perhaps a way to add the ability to pass these Nuxt-specific options to it?

Currently there is no way to do this. See these lines:

monoblok/packages/nuxt/src/runtime/composables/useAsyncStoryblok.ts

Lines 33 to 38 in 1bf21ff

	const { data } = await useAsyncData(uniqueKey, () => {
	return storyblokApiInstance.get(
	`cdn/stories/${url}`,
	apiOptions,
	);
	});

Only url is user-provided and the options object of useAsyncData is not implemented.

It would be great to see this added as an additional option?

Thanks

[m-shum]

This would be huge, especially for SSG builds with pregenerated payload.json files.

[michaelpumo]

I would be happy to attempt a PR for this feature but I really need a core member to verify and create an issue for this first.

[alvarosabu]

Hi @michaelpumo @m-shum, thanks for creating these discussions around the useAsyncStoryblok. We can all agree that the composable can use some refactoring, especially due #70.

I'm thinking of the following DX:

const { data: story, status, error, refresh, clear } = await useAsyncStoryblok(
  "vue/test-richtext",
  {
     // async options https://nuxt.com/docs/api/composables/use-async-data#params
     server: true,
     lazy: true,
    // API options
    api: {
       version: "draft"
    },
    // Bridge options
    bridge: {
    }
  },
);

This will require a major since it's a breaking change, so I would probably add it to this milestone https://github.com/storyblok/monoblok/milestone/2

Wdyt at first glance?

[m-shum]

I like it! It's logic we're already familiar with from the useAsyncData hook which is great.

[alvarosabu]

@m-shum @michaelpumo https://github.com/storyblok/monoblok/releases/tag/%40storyblok%2Fnuxt%408.0.0

Got something for you both 😉

Be aware of the breaking changes, I updated the package reference here

const { story, error, pending, data } = await useAsyncStoryblok('vue', {
  api: {
    version: 'draft',
    language: 'en',
    resolve_relations: 'popular-articles.articles',
  },
  bridge: {
    resolveRelations: 'popular-articles.articles',
  },
});

if (error.value) {
  throw createError({
    statusCode: error.value.statusCode,
    statusMessage: error.value.statusMessage
  });
}

[m-shum]

@michaelpumo From the updated docs it looks like you'd pass in the options directly instead of wrapped in an options key, so it'd be something like:

const { story, error, pending, data } = await useAsyncStoryblok('vue', {
  api: {
    version: 'draft',
    language: 'en',
    resolve_relations: 'popular-articles.articles',
  },
  bridge: {
    resolveRelations: 'popular-articles.articles',
  },
  transform: (data) => {},
  lazy: false,
  getCachedData: () => {},
  etc...
});

@alvarosabu I think @michaelpumo has a very valid point here in that it may be better to pass options in as an object using the options key as you would in a regular useAsyncData hook, just to keep it consistent with behaviour we already know from using the Nuxt hook. Less ambiguity that way so long as the documentation clearly states that these are useAsyncData options. Though I guess you could argue that it may be confusing and folks might think they're Storyblok-specific options.

[michaelpumo]

I think an options object would be best because it has a similar shape to useAsyncData. It might be easier to type in TypeScript too as the library authors.

[alvarosabu]

@m-shum you are right with your assumption, Thats correct. @michaelpumo I did consider that option, but I discarded it for the following reasons:

useAsyncStoryblok is just a wrapper of useAsyncData, but with the extra functionality of enabling the bridge in the client -> https://github.com/storyblok/monoblok/blob/938ded14511ec03c0c259f2080752a0af9543801/packages/nuxt/src/runtime/composables/useAsyncStoryblok.ts#L87C2-L99C4

I think an options object would be best because it has a similar shape to useAsyncData

When you use useAsyncData, you pass an object, not a {options: useAsyncOptions }

const { data: users1 } = await useAsyncData(
  'users', 
   () => $fetch('/api/users'), 
   { immediate: true }
)

So it should be equally natural to pass the useAsyncDara

const { data } = await useAsynStoryblok(
  'vue',
  { immediate: true }
)

Then, if you want to customize the API or the bridge

const { data } = await useAsynStoryblok(
  'vue',
  { 
     immediate: true,
     api: {
        version: 'draft',
     }
   }
)

It might be easier to type in TypeScript too, as the library authors.

The options should be correctly typed with this interface https://github.com/storyblok/monoblok/blob/938ded14511ec03c0c259f2080752a0af9543801/packages/nuxt/src/runtime/composables/useAsyncStoryblok.ts#L10C1-L15C2, which extends AsyncDataOptions and adds the Storyblok-related properties.

If the type is not working as expected or the documentation is not clear, please let me know.  😊

[michaelpumo]

Oh I understand now, my mistake. Thanks for clarifying everything!

[alvarosabu]

No worries at all @michaelpumo I'm here to help 😊, I appreciate the discussion

[michaelpumo]

Hi @alvarosabu are the types missing for useAsyncStoryblok in the package? Looks like they're empty. I'm getting everything as "any" when using this new version 8.0.0

Wanted to ask before submitting an issue incase I'm mistaken. The API doesn't appear to be typed.

[alvarosabu]

Hi @michaelpumo I just checked and you are right, something failed generating the d.ts. You can follow the progress here #193 thanks for reporting it