File location for relation widget

[tomrndom]

I'm currently trying to use the relation widget with a file in Gatsby.

Right now I have a folder at src/content/ with a couple of json files that I use as settings for my page, I added a new one for the relation widget, but I can't get the relation widget to load this options from the file.

this is my CMS.js file

import CMS from 'netlify-cms-app'

import BlogPostPreview from './preview-templates/BlogPostPreview'

import { Widget as FileRelationWidget } from '@ncwidgets/file-relation'
import { Widget as IdWidget } from '@ncwidgets/id'

const loadData = async (dataPath) => {
  const data = await fetch(dataPath)
    .then(data => data.json())
    .catch(err => console.error(err))

  window.repoFiles = data
}

loadData('src/content/authors.json');

CMS.registerWidget(IdWidget)
CMS.registerWidget(FileRelationWidget)

CMS.registerPreviewStyle('style/styles.scss');

CMS.registerPreviewTemplate('blog', BlogPostPreview)

The error in the console says
Uncaught (in promise) TypeError: Cannot read property 'entry' of undefined at Control.<anonymous> (control.js:62) at Generator.next (<anonymous>) at fulfilled (control.js:4)

It seems this line isn't getting the options from the file

netlify-cms-widgets/packages/widget-file-relation/src/control.tsx

Line 27 in 7cd27d7

const results = await loadEntry(collection, file)

this is my config in the config.yml file

collections:
  - name: "configurations"
    label: "Configurations"
    editor:
      preview: false
    files:
      - file: "src/content/authors.json"
        label: "Authors"
        name: "authors"
        fields:
          - {label: "Authors", name: "authors", widget: list, fields: [
              {label: "Name", name: "name", widget: string},
              {label: "Slug", name: "slug", widget: string},
              {label: "ID", name: "id", widget: ncw-id, prefix: author}
            ]}
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Author", name: "author", widget: ncw-file-relation, collection: configurations, file: "src/content/authors.json", target_field: authors, id_field: id, display_fields: name }
      - {label: "Publish Date", name: "date", widget: "datetime", format: "L", dateFormat: "MM/DD/YYYY"}
      - {label: "Categories", name: "categories", widget: "select", multiple: true, options: [
          {label: "News & Announcements", value: "news-announcements"},
          {label: "Software", value: "software"},
          {label: "Use Cases", value: "use-cases"},
          {label: "Features & Updates", value: "features-updates"},
        ]}
      - {label: "Body", name: "body", widget: "markdown"}

It's necesary to move my authors.json to the static folder? (same folder as config.yml file)

[d4rekanguok]

Thanks for opening an issue @tomrndom, I will check it out

[d4rekanguok]

@tomrndom In config.yml, The file field should be the name of the file, instead of the file location:

    files:
      - file: "src/content/authors.json"
        label: "Authors"
        name: "authors"  # <-- use this field

...

      - label: "Author"
        name: "author"
        widget: ncw-file-relation 
        collection: configurations
-       file: "src/content/authors.json"
+       file: authors
        target_field: authors, id_field: id
        display_fields: name

Let me know if that works! I should really make the document better, sorry about that.

[tomrndom]

@d4rekanguok Thanks for you response, I'm currently trying changing the file path to the name of the file, but I'm getting this error :

Seems like the loadData function isn't fetching the json file from the src/content/ folder. Insteed of the file, I'm getting an 404 html response.

[d4rekanguok]

Ah something's definitely off, it shouldn't fetch a local file i.e /admin/src/content/authors.json, it should fetch it from github instead. I'll try to reproduce this with the bit of info you have given, but it'd be awesome if you could put together a reproduction repo 🙏 Thanks @tomrndom!

[tomrndom]

I made a reproduction repository but the thing is, that it's working perfectly on this new one. I don't know if could it be an netlify cache issue, I recently face many of those when I uploaded some changes that affected the CMS. Will make some test to make it work. Thanks

https://dreamy-knuth-40c8d6.netlify.com/admin/

https://github.com/tomrndom/netlify-cms-relation-widget

[tomrndom]

Could it be that my repo it's private, and netlify-cms cannot fetch the file from a private repository?

It seems like that's the only difference between the reproduction repo and the one I was trying to implement the widget.

I'm noticing on the network tab that, on the reproduction repo, the site fetch the file, and not in the others repositories

[d4rekanguok]

@tomrndom I have deployed this widget on a few private repos, so I don't think that's the issue...
However I've just found an issue with latest version of netlify-cms-app. Could you try again, but pin your netlify-cms-app version to exactly 2.9.7?

[d4rekanguok]

Oh I've just seen the edit -- I doubt that this is the cause then. :( Perhaps something to do with your backend setup in config.yml?

[tomrndom]

It's weird, on both sites the config it's the same

backend:
  name: git-gateway
  branch: master

[d4rekanguok]

I've just seen this:

const loadData = async (dataPath) => {
  const data = await fetch(dataPath)
    .then(data => data.json())
    .catch(err => console.error(err))

  window.repoFiles = data
}

loadData('src/content/authors.json');

I'm so sorry I missed this the first time. If this is the way you want to load data then yes, authors.json must be in the static directory, and you'd need to change the path to

loadData('/authors.json')

We are doing this in this repo's packages/playground, but it's only because we don't want to set up a backend for the demo project 😅 if you're using git-gateway, you shouldn't use repoFiles (it's for test-repo only)

[tomrndom]

Yes I noted that, and removed that function from the cms.js file. I'm still working on it to find out a solution.

[tomrndom]

Welp it seems it was a problem with the version of netlify-cms-app, it's working with the 2.9.7 version but not with the 2.11.29.

[d4rekanguok]

Ahh so that's what it is. The good news is the folks over netlifyCMS has just merged the fix for this.

Once they release a new update, I will release a patch as well. Thank you for using this library + sharing your debug process, I really appreciate it.

If you'd like, you can subscribe to #25 to get update on the (very soon) patch!