Use data source for options

[bjoernbg]

Currently the only way to provide options to a plugin seems to be through "Self" and entering the individual options for each instance of a plugin. This becomes extremely tedious and error-prone when having more than very frew instances of a plugin.

In the field settings pane it is possible to switch from "Self" to "Datasource" (amongst others). So we thought that would be the perfect way to use a datasource. That way we only have to select the correct data source and when something changes (external API URL in our case) only the datasource has to be updated.

There does not seem to be a good way to centrally manage settings like that – for standard field types like Single-Option this works very well and we'd like to have the same ease of use for custom fields…

[eunjae-lee]

Hello @bjoernbg, thanks for creating this issue. As you know, that "Source" doesn't work for custom field plugins yet. There is an internal ticket for this task, but no ETA yet. Ultimately we'd like to have something like this:

const { type, data, actions } = useFieldPlugin();

console.log(data.options); // <- you should have all the options from Dataset here

While it's not the case yet, there is a workaround if you'd like to try out.

  useEffect(() => {
    if (type === 'loaded') {
      const url = `https://api.storyblok.com/v2/cdn/datasource_entries?token=${data.token}`
      fetch(url, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      })
        .then((response) => response.json())
        .then((json) => {
          console.log('# data source entries', json)
        })
    }
  }, [type])

This will give you this:

{
    "datasource_entries": [
        {
            "id": 3564960,
            "name": "asdf",
            "value": "vasdfasd",
            "dimension_value": null
        },
        {
            "id": 3564961,
            "name": "wef",
            "value": "sfhsdfg",
            "dimension_value": null
        },
        {
            "id": 7035428,
            "name": "HEY",
            "value": "VALUE",
            "dimension_value": null
        }
    ]
}

What do you think?

[bjoernbg]

Thanks, that would be our idea as well, but it's a bit more complicated nonetheless. Also, it seems that we only get a cached version of the datasource through the REST endpoint (X-Cache header says Hit from cloudfront). Changes that I made to my datasource in Storyblok are not beeing reflected in the result from the fetch. At least for 5 minutes or so, which is cumbersome and would make it difficult to change something on a live system and test it immediately (you never know when you get the latest version).

So it's not really an option for now.

[eunjae-lee]

@bjoernbg thanks for the perspective. That is definitely going to be a good push to the team to improve this part. It's indeed a CDN endpoint which doesn't guarantee realtime updates. You can use Management API instead, which gives you the latest data without caching. But you need Personal Access Token for this, which means you're gonna have to embed it in your source code which is not good security-wise, or put it as an option, which still can be seen anyone in your Storyblok organization.

Feel free to explore what I just suggested above if the drawback is bearable to you. In the meantime, I've just re-initiated the internal discussion on this topic. I will let you know the progress.

[BibiSebi]

Hey @bjoernbg, our team has worked on enabling the 'datasources' as a field plugin source option. The functionality works as follows: If you select a datasource as the field plugin source, the key-value pairs will be passed as options to the field plugin. This should make the reusability of options between field plugins throughout the space much easier.

Feel free to give it a try and share your feedback with us.