Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What is the correct way to access a story content inside a Nuxt plugin? #623

Open
1 task done
stefanobartoletti opened this issue Oct 25, 2023 · 8 comments
Open
1 task done
Assignees
Labels
question [Issue] Further information is requested

Comments

@stefanobartoletti
Copy link

stefanobartoletti commented Oct 25, 2023

Description

I'm trying to find a way to retrieve the content of a single story inside a Nuxt plugin, because I need to set some data sourced from the CMS without it being related to a specific component.

To provide some extra context, I need to dynamically set the "Site Name" property, provided by the Nuxt SEO module, with something like that

// plugins/site-config.server.ts
import { defineNuxtPlugin, updateSiteConfig, useRequestURL } from '#imports'

export default defineNuxtPlugin({
  name: 'nuxt-site-config:overrides',
  enforce: 1,  // makes sure it's ran before nuxt-seo plugin
  setup() {
    const url = useRequestURL()
    if (url.origin.includes('subdomain.host.com')) {
      updateSiteConfig({
        url: url.origin,
        name: 'Subdomain',
        description: 'Subdomain description',
      })
    }
  },
})

Source: harlan-zw/nuxt-seo#121 (comment)

In the previous snippet, I need to set the name property with a string from Storyblok.

I tried something like this

export default defineNuxtPlugin({
  name: 'nuxt-site-config:overrides',
  enforce: 'pre', // makes sure it's ran before nuxt-seo plugin
  setup () {
    let siteConfig = {}
    const storyblokApi = useStoryblokApi()

    const { data } = storyblokApi.get('cdn/stories/config/site-config', {
      version: 'draft',
    })
    siteConfig = data.story

    updateSiteConfig({
      name: siteConfig.content.site_title
    })
  },
})

and many variations, but no matter what I try, I always get a 500 error.

How can I access this data in a simple way?

Suggested solution or improvement

I wish I knew :)

Additional context

No response

Validations

@stefanobartoletti stefanobartoletti added enhancement [Issue][PR] New feature pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels Oct 25, 2023
@Dawntraoz Dawntraoz added question [Issue] Further information is requested and removed enhancement [Issue][PR] New feature pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels Oct 25, 2023
@Dawntraoz Dawntraoz self-assigned this Oct 25, 2023
@Dawntraoz
Copy link
Contributor

Hi @stefanobartoletti, just wondering if the enforce option has something to do with it 🤔 because to load/initialize our SDK, we use this plugin: https://github.com/storyblok/storyblok-nuxt/blob/main/src/runtime/plugin.ts, so I guess your plugin doesn't have the context yet, so it wasn't initialized yet when you tried to call useStoryblokApi() composable.

Any chance you can set up a simple Stackblitz using that specific plugin so I can try to help you with the solution?

In the meantime, you can try enableSudoMode to true and define your plugin for initializing the SDK: Define your own plugin, and enforcing it before the one you are running there.

@stefanobartoletti
Copy link
Author

Thank you for your reply, I will check to see what happens when fiddling with enforce, and see to setup a stackblitz for you ASAP

@stefanobartoletti
Copy link
Author

@Dawntraoz this is a minimal stackblitz, I'm getting some different errors than my local config, but it is still not working, so maybe it can be useful too

https://stackblitz.com/edit/nuxt-starter-zmsdjr?file=plugins%2Fseo-site-config.server.js

Please let me know if you need something else

@stefanobartoletti
Copy link
Author

I'm trying to diagnose this further, I also tried to explicitly importing useStoryblokApi, like this

import { useStoryblokApi } from '#imports';

export default defineNuxtPlugin({
  name: 'nuxt-site-config:overrides',
  enforce: 'pre', // makes sure it's ran before nuxt-seo plugin
  setup() {
    let siteConfig = {};
    const storyblokApi = useStoryblokApi();

    const { data } = storyblokApi.get('cdn/stories/config/site-config', {
      version: 'draft',
    });
    siteConfig = data.story;

    updateSiteConfig({
      name: siteConfig.content.site_title,
    });
  },
});

But it is not working, I get this error, maybe it can help:

[nuxt] [request error] [unhandled] [500] storyblokApi is null

You can't use useStoryblokApi if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.

@stefanobartoletti
Copy link
Author

Sorry to bump this up, is there any news about this?

I can provide more info and context if needed :)

@awacode21
Copy link

i am dealing with the same question. Any new insights?

@stefanobartoletti
Copy link
Author

stefanobartoletti commented Feb 7, 2024

@awacode21 I don't know if this can be useful, but I kind of solved it in another way, using a plain fetch.

It does not really "feel" like the proper way (I would prefer to use the Storyblok API even here, but this is probably a little developer OCD coming in), but since I only need a single static value to be updated, it does the job.

(I'm using Nuxt in static site generator mode, so I used a server plugin as I don't need this value to change later)

// /plugins/seo-site-config.server.js
export default defineNuxtPlugin({
  name: 'nuxt-seo:dynamic-site-config',
  enforce: 'pre',
  async setup() {
    const response = await fetch(`https://api.storyblok.com/v2/cdn/stories/path/to/my/story?version=draft&token=${process.env.SB_API_TOKEN}`)
    const siteSettings = await response.json()
    updateSiteConfig({
      name: siteSettings.story.content.site_title,
    })
  },
})

Feel free to adapt it to your use case.

(I'm leaving this open as this is a workaround and not a solution to the original question)

@awacode21
Copy link

@stefanobartoletti thanks for your answer. I did the same this morning.. going with a simple fetch. It solved my problem. But i agree i would prefer to use storyblok api

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question [Issue] Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants