Expected Behavior

Gatsby v5 has been out since Nov 2022. Currently, gatsby-source-storyblok doesn't officially support Gatsby v5 but would be great if it does.

Current Behavior

gatsby-source-storyblok requires installation with the --legacy-peer-deps npm flag or override to work with Gatsby 5

Steps to Reproduce

1. Set up a repo with the Gatsby v5 starter
2. Try to install gatsby-source-storyblok without the --legacy-peer-deps flag
3. See errors

Sorry trying to resolve relations but not sure what is supposed to be returned when this is enabled.

Basically have articles with a relationship to authors, so ideally when retrieving articles, or an article, we can get the author name that has been related to that article.

Hi, I just opened an issue on storyblok-js-client

Basically, v4.0.X get('cdn/stories') does not return translated stories.

As storyblok-js-client is a regular dependency, once the is a release that fixes this issue, the dependency should be updated.

Thanks

Expected Behavior

After setting up the site following the Gatsby 5 minute tutorial on the Storyblok website, I should be able to see changes I made in the Storyblok v2 visual editor even after saving.

Current Behavior

While I'm able to see my changes as I'm typing into Storyblok, as soon as I click the "Save" button, my changes disappears in the visual editor and revert to the initial state when I started npm run develop.

Steps to Reproduce

1. Follow the Gatsby 5 minute tutorial on the Storyblok website
2. Make changes on a page on Storyblok, eg, the homepage, then click "Save" and see that your changes go away in the visual editor.

When I'm trying to get children of my link folder, children is empty even if I've stories inside folder in Storyblok

storyblok

my code

"gatsby-source-storyblok": "^3.0.1"

Hey Storyblok team. Noticed this bug earlier.

For internal links I've created in a rich text field, whether they are an inline link or a custom block containing a link, they don't the usual storyblok link object containing the full_slug when using resolve_links=url.

This link has resolved. It is part of a block on a content type not inside a rich text field

But this link hasn't resolved. It is part of a rich text fields

Thanks for any help you can give.

Hi, I'm fairly new to this plugin and Storyblok. I'm trying to use translated slugs, which requires "resolve_links"

Is there a way to use this parameter with this plugin? If so any pointers on how to do it would be greatly appreciated.

Thanks.

Hello guys.

I have been trying to run the project for several days and keep getting the same error:

Error: Path contains invalid characters: C:\Users\USER_NAME\projects\PROJECT_NAME\.cache\caches\sb-https:\a.storyblok.com\f\141501\1738x1160\92c71418af\photo-1461749280684-dccba630e2f6-1.jpeg

Below is my gatsby.config.js file:

const path = require('path')
require('dotenv').config()

module.exports = {
  siteMetadata: {
    siteUrl: "https://SITE_URL",
    title: "TITLE",
    description: "DESCRIPTION",
    headline: "HEADLINE",
    siteLanguage: "en",
    logo: path.resolve(__dirname, "src", "images", "favicon.png"),
    url: "https://URL",
    image: path.resolve(__dirname, "src", "images", "favicon.png"),
    twitterUsername: "@TWITTER_USER_NAME",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-mailchimp",
      options: {
        endpoint: "https://ENDPOINT",
        timeout: 3500, 
      },
    },
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "NAME",
        short_name: "SHORT_NAME",
        start_url: "/",
        icon: path.resolve(__dirname, "src", "images", "favicon.png"),
      },
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-use-query-params",
    "gatsby-plugin-preload-fonts",
    "gatsby-plugin-postcss",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-storyblok",
      options: {
        accessToken: process.env.STORYBLOK_API_KEY,
        version: process.env.NODE_ENV === "production" ? "published" : "draft",
        localAssets: true,
      },
    },
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-plugin-segment-js",
      options: {
        prodKey: "SEGMENT_PROD_WRITE_KEY",
        devKey: "SEGMENT_DEV_WRITE_KEY",
        trackPage: true,
        trackPageDelay: 50,
        delayLoad: false,
        delayLoadTime: 1000,
        manualLoad: true,
      },
    },
  ],
};

Next you can see the full error log:

> set ENABLE_GATSBY_REFRESH_ENDPOINT=true && npx gatsby develop

warn Plugin gatsby-plugin-segment-js is not compatible with your gatsby version 4.0.0 - It requires gatsby@^3.0.0 || ^2.0.0
warn Plugin gatsby-plugin-segment-js is not compatible with your gatsby version 4.0.0 - It requires gatsby@^3.0.0 || ^2.0.0
success open and validate gatsby-configs, load plugins - 1.557s
success onPreInit - 0.045s
success initialize cache - 0.201s
success copy gatsby files - 0.474s
success Compiling Gatsby Functions - 0.844s
success onPreBootstrap - 0.888s
success createSchemaCustomization - 0.018s

 ERROR

Path contains invalid characters: C:\Users\maxim\projects\PROJECT_NAME\.cache\caches\sb-https:\a.storyblok.com\f\141501\1738x1160\92c71418af\photo-1461749280684-dccba630e2f6-1.jpeg



  Error: Path contains invalid characters: C:\Users\maxim\projects\PROJECT_NAME\.cache\caches\sb-https:\a.storyblok.com\f\141501\1738x1160\92c71418af\photo-1461749280684-dccba630e2f6-1.jpeg

  - utils.js:16 checkPath
    [PROJECT_NAME]/[fs-extra]/lib/mkdirs/utils.js:16:21

  - make-dir.js:21 Object.ensureDirSync
    [PROJECT_NAME]/[fs-extra]/lib/mkdirs/make-dir.js:21:3

  - cache-lmdb.ts:42 GatsbyCacheLmdb.init
    [PROJECT_NAME]/[gatsby]/src/utils/cache-lmdb.ts:42:8

  - get-cache.ts:11 getCache
    [PROJECT_NAME]/[gatsby]/src/utils/get-cache.ts:11:45

  - gatsby-node.js:118
    [PROJECT_NAME]/[gatsby-source-storyblok]/gatsby-node.js:118:38

  - Array.forEach

  - gatsby-node.js:114 Object.exports.onCreateNode
    [PROJECT_NAME]/[gatsby-source-storyblok]/gatsby-node.js:114:18

  - api-runner-node.js:430 runAPI
    [PROJECT_NAME]/[gatsby]/src/utils/api-runner-node.js:430:22

  - api-runner-node.js:581 Promise.catch.decorateEvent.pluginName
    [PROJECT_NAME]/[gatsby]/src/utils/api-runner-node.js:581:13

  - debuggability.js:384 Promise._execute
    [PROJECT_NAME]/[bluebird]/js/release/debuggability.js:384:9

  - promise.js:518 Promise._resolveFromExecutor
    [PROJECT_NAME]/[bluebird]/js/release/promise.js:518:18

  - promise.js:103 new Promise
    [PROJECT_NAME]/[bluebird]/js/release/promise.js:103:10

  - api-runner-node.js:579
    [PROJECT_NAME]/[gatsby]/src/utils/api-runner-node.js:579:16

  - util.js:16 tryCatcher
    [PROJECT_NAME]/[bluebird]/js/release/util.js:16:23

  - reduce.js:166 Object.gotValue
    [PROJECT_NAME]/[bluebird]/js/release/reduce.js:166:18

  - reduce.js:155 Object.gotAccum
    [PROJECT_NAME]/[bluebird]/js/release/reduce.js:155:25


not finished source and transform nodes - 1.881s

And finally output of gatsby info command:

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 AMD Ryzen 3 3200U with Radeon Vega Mobile Gfx
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.2 - /c/Python310/python
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.55)
  npmPackages:
    gatsby: ^4.0.0 => 4.0.0
    gatsby-cli: ^4.0.0 => 4.0.0
    gatsby-image: ^3.11.0 => 3.11.0
    gatsby-plugin-image: ^2.5.1 => 2.5.1
    gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2
    gatsby-plugin-manifest: ^4.2.0 => 4.2.0
    gatsby-plugin-postcss: ^5.0.0 => 5.0.0
    gatsby-plugin-preload-fonts: ^3.0.0 => 3.0.0
    gatsby-plugin-react-helmet: ^5.5.0 => 5.5.0
    gatsby-plugin-segment-js: ^3.7.0 => 3.7.0
    gatsby-plugin-sharp: ^4.5.1 => 4.5.1
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
    gatsby-source-filesystem: ^4.0.0 => 4.4.0
    gatsby-source-storyblok: ^3.1.0 => 3.1.0
    gatsby-storyblok-image: ^0.3.0 => 0.3.0
    gatsby-transformer-sharp: ^4.5.0 => 4.5.0
  npmGlobalPackages:
    gatsby-cli: 4.7.0

Can somebody assist me with this issue?

P.S. this error is gone after deleting gatsby-source-storyblok plugin from gatsby.config.js file.

Thanks in advance!

Hello,
I'm getting a parsing error when I gatsby build my gatsby site.

gatsby clean & gatsby build
[1] 84360
info Deleting .cache, public
info Successfully deleted directories
[1]  + 84360 done       gatsby clean
success open and validate gatsby-configs - 0.724s
success load plugins - 0.684s
success onPreInit - 0.010s
success delete html and css files from previous builds - 0.016s
success initialize cache - 0.025s
success copy gatsby files - 0.061s
success onPreBootstrap - 0.005s
success createSchemaCustomization - 0.007s

 ERROR #11321  PLUGIN

"gatsby-source-storyblok" threw an error while running the sourceNodes lifecycle:

Parse Error

  Error: Parse Error

  - stream_base_commons.js:145 TLSWrap.onStreamRead
    internal/stream_base_commons.js:145:17


not finished source and transform nodes - 5.281s

This happen only when I add a specific relation to resolve called launch_case_study.case_studyt that is identical to the launch_insight.insight.

Both are a single-option story selectors and they only change in the path of the story to choose from.

Any idea why?

Thank you

I have followed the exact convention with the same versions, but it seems that the visual editor isn't working.

Passing in options for resolveLinks: 'url' in the gatsby-config.js file is not properly returning response for story links as detailed here:

https://www.storyblok.com/cl/url-resolving#request-with--resolvelinksurl

Instead it seems to be treated as resolveLinks: 'story'.

Passing resolve links through the storyblok GraphQL endpoint (http://gapi-browser.storyblok.com/) does resolve the links properly.

$ yarn run develop
yarn run v1.22.4
$ gatsby develop
success open and validate gatsby-configs - 0.035s
success load plugins - 2.537s
success onPreInit - 0.013s
success initialize cache - 0.009s
success copy gatsby files - 0.056s
success onPreBootstrap - 0.248s
success createSchemaCustomization - 0.006s

 ERROR #11321  PLUGIN

"gatsby-transformer-json" threw an error while running the onCreateNode lifecycle:

Could not find function loadNodeContent for plugin gatsby-source-storyblok

  60 |   }
  61 |
> 62 |   const content = await loadNodeContent(node);
     |                         ^
  63 |   const parsedContent = JSON.parse(content);
  64 |
  65 |   if (_.isArray(parsedContent)) {

File: node_modules/gatsby-transformer-json/gatsby-node.js:62:25



  Error: Could not find function loadNodeContent for plugin gatsby-source-storyblok

Versions:

• gatsby: 2.20.6
• gatsby-transformer-json: 2.3.1
• storyblok-react: 0.0.10
• gatsby-source-storyblok: 0.2.6

How about reducing data before sourceNodes?
ex: have a config to filter the slug.

Greetings 👋

While poking around in your source code, I noticed what looks like a small bug.

In gatsby-node, in onCreateNode, when localAssets is enabled, it calles getCache() with a cache key, then starts using it like it's a cached item. In actuality I think it should be calling cache.get(), and suspect that assets aren't being cached at all.

I'm not currently using localAssets, so this doesn't affect me. I don't have the time to open a PR right now, but flagging for investigation, and if I have time I'll try to get to it myself. I might be wrong, but I've built a similar, smaller plugin, and using getCache() like this will throw a type error.

Current:

      imagePaths.forEach(async (imagePath) => {
        // ...
        const cacheMediaData = await getCache(mediaDataCacheKey); // <- `getCache` returns object of type `GatsbyCache`, not cached item
        // ...
      });

What I think it should be:

      imagePaths.forEach(async (imagePath) => {
        // ...
        const cacheMediaData = await cache.get(mediaDataCacheKey); 
        // ...
      });

Describe the issue you're facing

When running npm run buildi get a build error and it seems to be related to the includeLinks option which is set to truein this case.

Reproduction

localhost

Steps to reproduce

Set includeLinks: true in options and run npm run build

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 103.37 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 14.1.2

Used Package Manager

npm

Error logs (Optional)

ERROR #11321 API.NODE.EXECUTION

"gatsby-source-storyblok" threw an error while running the sourceNodes lifecycle:

res.data[type].forEach is not a function

62 |
63 | if (options.includeLinks === true) {

64 | await Sync.getAll('links', {
| ^
65 | node: 'StoryblokLink',
66 | params: getStoryParams('', options),
67 | });

File: node_modules/gatsby-source-storyblok/gatsby-node.js:64:5

TypeError: res.data[type].forEach is not a function

• sync.js:90 Object.getAll
  [cloudnine.se]/[gatsby-source-storyblok]/src/sync.js:90:22

• task_queues:95 processTicksAndRejections
  node:internal/process/task_queues:95:5

• gatsby-node.js:64 Object.exports.sourceNodes
  [cloudnine.se]/[gatsby-source-storyblok]/gatsby-node.js:64:5

• api-runner-node.js:509 runAPI
  [cloudnine.se]/[gatsby]/src/utils/api-runner-node.js:509:16

not finished source and transform nodes - 2.611s

Validations

• Follow our Code of Conduct

Describe the issue you're facing

When upgrading the library to version ^6.0.0 the type returned from getStories is any rather than ISbStories.

Reproduction

https://github.com/joakimmillen/gatsby-source-storyblok-type-issue

Steps to reproduce

• Open index.ts
• check the type of the response variable
• is "any" should be "ISbStories"

System Info

System:
    OS: macOS 13.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 10.25 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    pnpm: 8.3.1 - ~/.nvm/versions/node/v18.12.1/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.4

Used Package Manager

yarn

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

I have tried both GatsbyJS and NextJS boilerplate also. The same thing happening, 401 error!

Pls, help @spences10 @onefriendaday @jonsuh @fgiuliani @saijim

"options must be an object" error

Expected Behavior

When starting my server I get this error which I haven't encountered before. I removed node_modules and restarted the server and I've downgraded this plugin but it's still not working with several versions. I've double checked my configuration but everything checks out I think. It should have no errors and server should run like it has previously done before.

Current Behavior

Steps to Reproduce

1. gatsby develop

// This is the error produced after running `gatsby develop`:

  16 |   });
  17 |
> 18 |   const space = await Sync.getSpace();
     |                            ^
  19 |   const languages = options.languages ? options.languages : space.language_codes;
  20 |   languages.push('');
  21 |

File: node_modules/gatsby-source-storyblok/gatsby-node.js:18:28

This is my gatsby.config.js file:

module.exports = {
	plugins: [
                ...
		{
			resolve: 'gatsby-source-storyblok',
			options: {
				accessToken: *********secret***********,
				version: 'draft',
				region: 'us'
			}
		}
         ]
}

And this is my layout.js file:

// imports

const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')

storyblokInit({
	// accessToken: **************secret**********,
	accessToken: sbConfig.options.accessToken,
	apiOptions: {
		region: 'us'
	},
	use: [apiPlugin],
	components: {
		slide: Slider,
		teaser: Teaser
        }
})

I'm not sure what's going on.  The application was running fine before, but as I've said this last attempt was run after  I deleted my `node_modules` folder and then reinstalled packages with `yarn`.  Thanks in advance!

I'm trying to use the latest version of gatsby-source-storyblok for our Gatsby app. However, when running gatsby build. I'm given an error that points towards gatsby-source-storyblok.

Any help would be appreciated.

Expected Behavior

Able to to build the app

Current Behavior

Unable to build

Steps to Reproduce

1. Install the latest version
2. Run gatsby build

Hey guys,

I'm not sure if this expected behaviour, doesn't feel like it. We're running into an issue with our site running on Storyblok and Gatsby. Looks like all storyblok data is getting exported as a module into the final javascript file. For our site that's a major problem since it ends up being a file of 5MB (25MB uncompressed).

I have been searching high and low to understand where this happens, but can't find it.
Example of such a js file that gets generated: https://www.svk.be/2-4468f4f756272b6ad09f.js

EDIT
Visualizing the sourcemap for this file reveals this:
https://cl.ly/61e96877cf73
Having a hard time figuring out why that file would represent such an enormous amount of data though.

Are there any plans to allow querying for assets. With the image optimisations available in Gatsby it would be a shame not to use those on the images we are getting from Storyblok and we would like to avoid linking to an external host where possible.

I had a look at adding it myself, but it looks like assets are only available on the content management endpoints and not the cdn ones which would require different authorisation methods.

Currently I am using this https://gist.github.com/noVerity/064a905a25de2783ed1c28c397d6fe58 to get all the images and then rendering either a normal image or the Gatbsy image based on if I have a url or the image data, but using regular expression to parse some JSON doesn't seem ideal.

Describe the issue you're facing

This is probably more a question than a bug report, but you don't have a matching template for that, so I'll just go ahead here - sorry.

I have a content called news. Within this I have a field referencing a category. When inspecting it with graphql explorer I can see the ID of the referenced category by requesting the field field_category_string:

query {
  allStoryblokEntry(
    filter: {
      field_component: { eq: "news" }
    }
  ) {
    edges {
      node {
        name
        uuid
        field_category_string
      }
    }
  }
}

Now, if I ask gatsby-source-storyblok to resolve this relation:

...
{
  resolve: 'gatsby-source-storyblok',
  options: {
    resolveRelations: [
      'news.category',
    ],
},
...

the relation gets resolved as expected but the field_category_string disappears as an option from graphql. This is very unfortunate since I need the category to query for news withing this category.

Or to re-phrase the question: How can I resolve relations and allow the entities to be filtered by such a resolved relation?

Reproduction

sorry...

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Memory: 13.34 GB / 46.97 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Brave Browser: 121.1.62.156
    Chrome: 121.0.6167.139
  npmPackages:
    gatsby: ^5.12.4 => 5.12.11

Used Package Manager

yarn

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

Hi,
I'm encountering a problem when I need to query data such as Objects and Arrays.

At line 34 of the plugin's gatsby-node.js is written:

That creates the schema for fields_ such as fields_fieldname_string, fields_fieldname_number, fields_fieldname_boolean.

I need to access other types of fields such as field_fieldname_array and field_fieldname_object that are present inside the stringified content but not in the fields_ schema

I overcame this limitations by adding to the IF statement before, two more values to the array, in order to add that functionality in the plugin.

I can't find why this solutions is not provided by default, and if you are going to add it. It is needed.

Another question is: why do you stringify those types? What are the rationals behind?

Thx

I've upgraded from Gatsby 2 to 3 but now my Gatsby-node is dying. I've switch from my code that was working to the example that you list in the readme just to make sure its not my code that needed to change.

"gatsby-source-storyblok" threw an error while running the sourceNodes lifecycle:

Cannot destructure property 'createNode' of 'boundActionCreators' as it is undefined.

   5 |
   6 | exports.sourceNodes = async function({ boundActionCreators }, options) {
>  7 |   const { createNode, setPluginStatus } = boundActionCreators;
     |           ^
   8 |   const client = new StoryblokClient(options, 'https://api.storyblok.com/v1');
   9 |
  10 |   Sync.init({

File: node_modules/gatsby-source-storyblok/gatsby-node.js:7:11

I would like to get data from json files, so i've installed gatsby-transformer-json and trying to get data, by adding

 `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./central-data/`,
      },
    },

to my gatsby-config.
Suddendly i got this error:

 ERROR #11321  PLUGIN

"gatsby-transformer-json" threw an error while running the onCreateNode lifecycle:

Could not find function loadNodeContent for plugin gatsby-source-storyblok

  60 |   }
  61 |
> 62 |   const content = await loadNodeContent(node);
     |                         ^
  63 |   let parsedContent;
  64 |
  65 |   try {

File: node_modules/gatsby-transformer-json/gatsby-node.js:62:25



  Error: Could not find function loadNodeContent for plugin gatsby-source-storyblok

  - nodes.js:28 loadNodeContent
    [hsey]/[gatsby]/dist/db/nodes.js:28:11

Any idea if there is some weird clash between gatsby-source-storyblok and transofmer-json ?

This are versions i use:

"gatsby-source-filesystem": "^2.3.24",
"gatsby-source-storyblok": "^1.1.0",
"gatsby-transformer-json": "^2.4.11",

Hi team!

Great work and loving it already! We've recently upgraded our Gatsby version to v3, and unfortunately, we're getting few errors on our end.

Can I please request to bump up the gatsby-source-storyblok 🙏 ?

Thanks

It looks like this part needs updating: boundActionCreators

Some examples in the README reference functions/hooks that are not explained anywhere else in the document.

e.g. this example usage of useStoryblok has not been previously mentioned on the page, and in the context of the previous section, doesn't make sense. It is only mentioned once on the page.

useStoryblok(story.internalId, (newStory) => setStory(newStory), {
  resolveRelations: ["Article.author"],
});

e.g. this section explaining an alternative to useStoryblokBridge is mentioned, but useStoryblokBridge hasn't been previously mentioned on the page, and in the context of the previous section, doesn't make sense. It is also only mentioned once in the document.

If you don't use useStoryblokBridge, you still have access to the raw window.StoryblokBridge:

const sbBridge = new window.StoryblokBridge(options);
sbBridge.on(["input", "published", "change"], (event) => {
  // ...
});

Overall, this gives the impression that the current README has been made up of copy/pasted chunks from new releases to other packages, without being read end-to-end and checked that it still makes sense.

Expected Behavior

• When a function/hook is mentioned in the README, the reader should have context on why it is mentioned and it's relevance.
• It should be clear what is behaviour of vanilla @storyblok/react or storyblok-js-client vs extended functionality of gatsby-source-storyblok.
• Finally, users should not have to compile and parse snippets from @storyblok/react or storyblok-js-client in order to make sense of the README for gatsby-source-storyblok

Current Behavior

Inverse of above

Steps to Reproduce

N/A, issue with README

Hi,
I'm trying to get a list of all tags via graphQL, but when I try I only get one tag as a result.

allStoryblokTag {
  edges {
    node {
      name
      taggings_count
    }
  }
}

I also tried getting the tags with the content delivery API but there I got an empty array as a result.

Storyblok.get('cdn/tags/', {
  "starts_with": "posts/",
  "token": process.env.GATSBY_STORYBLOK_TOKEN,
  })
  .then(response => {
    console.log(response)
  }).catch(error => {
    console.log(error)
  })

I did the same thing as in the documentation.

Any idea what I did wrong?

Thank you.

Please I want Know How To Navigation in story Blok using gatsby

i am Creating global_navi component and added created global_navi.js and added into component.js

but it will show

I Need Component structure in Global navigation in Storyblok

Please Support

The storyblok documentation mentions adding a from_release parameter to the url to retrieve a story from a particular release. Can you please provide the same option as part of this plugin.

Hi, when querying for the data source entries, I get each node twice.
So for 5 nodes defined in the data source, I get 10 nodes in total in the query.

Not too sure what is happening here. This is an issue when no dimensions are set on the source.

I took the query directly from the docs

allStoryblokDatasourceEntry(filter: { data_source: { eq: "DATASOURCE_SLUG" } }) {
  edges {
    node {
      id
      name
      value
      data_source
      data_source_dimension
    }
  }
}

Possibly a bug, or I should refine the query somehow?
Thanks.

Hey Storyblok, is it possible or are you planning on making it possible to source from multiple spaces? We have a client with two spaces, one's a microservice that's powering part of their application (this is preexisting and bloated) and the other is new and purely for marketing content.

When querying allStoryblokEntries, full_slug is not returned in alternates anymore, only slug.

Hi!

I'm getting error after adding gatsby-source-storyblok to my repo and running gatsby develop.

Error message:

Error: Cannot find module 'core-js/modules/es6.regexp.split'

This is probably related to Babel changes:
jestjs/jest#8476 (comment)

After downgrading core-js dependency from 3.6.5 to 2.6.5 everything works fine in my website repo.

The content field is stringified. This is good for getting all the content for different schemas, but it has a problem, that of not being able to use graphql to use other functions. For instance, use gatsby-plugin-remote-images. Is there a possibility of having a parameter to enable/disable this?

On a clean install of Gatsby v5.5.0 and only the gatsby-source-storyblok plugin installed, I get a console error saying "message" is not allowed.

No pages are setup, just added in gatsby-config.js and the issue occurs.

Expected Behavior

At least have the local server and the GraphQL server up and running.

Current Behavior

Only addition to gatsby-config.js is the following:

{
	resolve: 'gatsby-source-storyblok',
	options: {
		accessToken: '...',
		version: 'draft',
		localAssets: true, // Optional parameter to download the images to use with Gatsby Image Plugin
		// languages: ['en'] // Optional parameter. Omission will retrieve all languages by default.
	}
},

Output:

$ gatsby develop
success compile gatsby files - 0.422s
success load gatsby config - 0.036s
warn Plugin gatsby-source-storyblok is not compatible with your gatsby version 5.5.0 - It requires gatsby@^3.0.0 || ^4.0.0
warn Plugin gatsby-source-storyblok is not compatible with your gatsby version 5.5.0 - It requires gatsby@^3.0.0 || ^4.0.0
success load plugins - 0.408s
success onPreInit - 0.010s
success initialize cache - 0.158s
success copy gatsby files - 0.190s
success Compiling Gatsby Functions - 0.275s
success onPreBootstrap - 0.299s
success createSchemaCustomization - 0.011s
Failed to validate error [Error [ValidationError]: "message" is not allowed] {
  _original: {
    context: {},
    message: Error: Unauthorized
        at /.../node_modules/@storyblok/react/dist/storyblok-react.js:1:7660
        at new Promise (<anonymous>)
        at dt._statusHandler (/.../node_modules/@storyblok/react/dist/storyblok-react.js:1:7586)
        at dt._methodHandler (/.../node_modules/@storyblok/react/dist/storyblok-react.js:1:7472)
        at processTicksAndRejections (node:internal/process/task_queues:95:5)
        at /.../node_modules/@storyblok/react/dist/storyblok-react.js:1:12891,
    response: {
      data: [Object],
      headers: [Object],
      status: 401,
      statusText: 'Unauthorized'
    },
    text: 'There was an unhandled error and we could not retrieve more information. Please run the command with the --verbose flag again.',
    level: 'ERROR',
    category: 'UNKNOWN',
    type: 'UNKNOWN',
    stack: [],
    docsUrl: 'https://gatsby.dev/issue-how-to'
  },
  details: [
    {
      message: '"message" is not allowed',
      path: [Array],
      type: 'object.unknown',
      context: [Object]
    }
  ]
}
not finished source and transform nodes - 0.529s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Steps to Reproduce

package.json

"dependencies": {
    "gatsby": "^5.5.0",
    "gatsby-plugin-image": "^3.5.0",
    "gatsby-plugin-sharp": "^5.5.0",
    "gatsby-plugin-sitemap": "^6.5.0",
    "gatsby-source-filesystem": "^5.5.0",
    "gatsby-source-storyblok": "^5.0.0",
    "gatsby-transformer-sharp": "^5.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

1. Setup clean Gatsby v.5.5.0
2. Install gatsby-source-stroyblok
3. Add gatsby-config.js settings
4. Run yarn develop or npm run develop
5. Error

I am trying to get all data about a linked story but only get the overview data (uuid, cached_url). Is there a way to resolve links with the Storyblok bridge to get this type of data into the visual editor.

Can you guys please upgrade the dependencies on this plugin?

Version of gatsby used in this library requires core-js@2 which is no longer supported and fills my console with warnings.

Also the peer dependency of storyblok-react is using version 0.0.6 instead of the latest 0.0.10

Hi,
I built a website for a client on Gatsby and I used Storyblok to manage content. After deploying it to Netlify the visual editor is not working saying https://webstarsltd.netlify.app/ refused to connect. I thought maybe Netlify has some issues so I deployed it on Gatsby Cloud but again the same issue https://webstarsfinalmaster.gatsbyjs.io/ refused to connect.
Any workaround for the issue, please?

One thing I notice, For both URLs, if I open up the developer's console I saw an error
You need to provide an access token to interact with Storyblok API.
And a warning
You are not in Draft Mode or in the Visual Editor.

Please help me find the solution.

Hi,
I'm trying to get all the dimensions from a specific datasource via graphQL, but when I try to access the dimensions field, I get null values.

I attach an example of query I'm using in the graphQL Explorer:

allStoryblokDatasource(filter: {data_source: {eq: "cta"}}) {
    edges {
      node {
        id
        name
        value
        dimensions {
          name
          id
          entry_value
        }
      }
    }
  }

Currently the implementation follows the previous version of resolve_links which got updated to allow these options: https://www.storyblok.com/cl/url-resolving. Currently we fall back to '1' as the parameter provided during the API call, resulting in including the whole "story" even though only "url" was passed.

I was not able to get the homeSlug option to work. Instead I had to resort to minor hack to get this to work.

Would using the new incremental builds Gatsby Incremental Builds bring any benefit to the speed of the build with this plugin?

I added the Storyblok plugin

npm install --save gatsby-source-storyblok storyblok-react

under gatsby-config.js in the Project Root Directory

plugins: [
    'gatsby-plugin-typescript',
      {
          resolve: 'gatsby-source-storyblok',
          options: {
              accessToken: 'bnsy3n0rAJtdQrecjODebQtt', 
              homeSlug: 'home',
              version: 'draft'
          }
      }
  ]

then run 

gatsby develop

then this Syntax Error will show

error Plugin gatsby-source-storyblok returned an error

Error: /Users/jamesonvallar/WebstormProjects/novanus-design/node_modules/gatsby-source-storyblok/gatsby-node.js:94
);
^
SyntaxError: Unexpected token )

Hello

I have the following gatsby-config.js file

module.exports = {
  siteMetadata: {
    title: "Gatsby Default Starter"
  },
  plugins: [
    "gatsby-transformer-sharp",
    "gatsby-plugin-sharp",
    "gatsby-plugin-react-helmet",
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
    },
    {
      resolve: "gatsby-source-storyblok",
      options: {
        accessToken: "NoQEMh9zMri0Y1FPBTo5mQtt",
        homeSlug: "home",
        version: process.env.NODE_ENV === "production" ? "published" : "draft"
      }
    }
  ]
};

which works perfectly fine during gatsby developmode.

However when I try to run gatsby build I get this error

success open and validate gatsby-configs - 0.036s
success load plugins - 3.759s
success onPreInit - 0.005s
success delete html and css files from previous builds -
success initialize cache - 0.030s
success copy gatsby files - 0.101s
success onPreBootstrap - 0.014s
success createSchemaCustomization - 0.008s
success source and transform nodes - 0.435s
success building schema - 0.427s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allStoryblokEntry" on type "Query".

If you don't expect "allStoryblokEntry" to exist on the type "Query" it is most likely a typo.
However, if you expect "allStoryblokEntry" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "allStoryblokEntry" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: gatsby-node.js:6:10

not finished createPages - 0.038s

Any idea what might be causing this?

We have run into an issue while trying to update our site to the latest Gatsby version utilizing gatsby-source-storyblok. We would like to utilize the latest gatsby-image-plugin to serve our images from Storyblok. The documentation provided by Storyblok gives a simple use case, but in the documentation provided, it only gives the example of Querying for an image when the name of the image is known. We need to conditionally render our images based on page.

For example, our Hero Block is used across several pages and we want to conditionally render the image used in the Hero based on the page and the image uploaded for that page in Storyblok.

Our thought was that we should be able to query in storyblokEntry at the page level to source the images used on that page. While we can find the image URL within the storyblokEntry graphql query, the childImageSharp --> gatsbyImageData object needed for dynamic images in gatsby-image-plugin seems to only be available on the allFile query. If the gatsbyImageData object is only available on allFiles, we don't see a way to conditionally render images without querying all images in Storyblok using gatsby-node and matching them at the component level. This however will not work as it causes the size of context shared to be too large to even deploy on Netlify.

I am sure majority of people who use Storyblok with Gatsby need to conditionally render images. We have been sent to this plug-in as an option but it also isn't compatible with newer versions of Gatsby. Many other CMS's have already created native support for the latest Gatsby-Image-Plugin, which can be seen here in this Gatsby documentation page. We'd love for this to be a feature of gatsby-source-storyblok!