Home
Support Forums

Relation widget nested inside list widget rewrites JSON key-value pair as string

Hello folks,

First off, a great big thanks to the Netlify team for building the CMS :thank_you:. It is so easy to implement with my GitLab backend and Gatsby front-end. Keep up the great work!

I’d like to seek help from the community on a scenario that I’m facing. I have two collections.

The first collection is a folder collection that has a bunch of JSON files, each representing a category and all with the same JSON structure. Here is what the JSON of each category file looks like.

{
  "categoryName": "Category 1",
  "categorySlug": "category-1",
  "topicsInCategory": [
    {
      "fileName": "file001"
    },
    {
      "fileName": "file002"
    },
    {
      "fileName": "file003"
    },
   ...

The second collection is also a folder collection that points to a bunch of Markdown files, each being a topic and all with the same YAML front matter. Here’s what each Markdown file looks like.

filename: file001.md

---
title: My Topic
---

## Heading 1

Notice that the filename matches the fileName field in the category.

In my config.yml, this is how I define both these collections.

First, the topic collection.

- name: "topic"
  label: "Topic"
  folder: "docs/topics"
  create: true
  delete: false
  editor:
      preview: true
    slug: "{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

Next, the category collection.

- name: "category"
  label: "Topic Categories"
  folder: "docs/categories"
  slug: "{{ categoryName }}"
  create: true
    delete: false
    format: json
    editor:
      preview: true
    fields:
      - { label: "Category Name", name: "categoryName", widget: "string" }
      - { label: "Category Slug", name: "categorySlug", widget: "string" }
      - {
          summary: "Topics in this Category",
          label: "Topics In Category",
          name: "topicsInCategory",
          widget: "list",
          collapsed: false,
          fields:
            {
              label: "Topic",
              name: "file",
              widget: "relation",
              collection: "topic",
              search_fields: ["title"],
              value_field: { { filename } },
              display_fields: ["{{title}}"],
            },
        }

This works great. When I go the the Category editor in the Admin interface, I get a dropdown from which I can add, remove, and edit topics into each category. The problem, though, is that when I make an edit and save the category, my JSON structure completely changes and breaks my GraphQL queries as a result. This is what the end result after saving looks like.

{
  "categoryName": "Category 1",
  "categorySlug": "category-1",
  "topicsInCategory": [
      "file001",
      "file002",
      "file003"
    ],
   ...

Notice how the fileName field was dropped. Is this because the relation widget is converting the JSON array into a string, and is that the intended behaviour? Am I configuring my collections incorrectly? Any pointers you can provide would be great. I searched through other questions, but didn’t find one that matches this particular case.

The fields property of your list widget should actually be a list, not an object:

- name: "category"
  label: "Topic Categories"
  folder: "docs/categories"
  slug: "{{ categoryName }}"
  create: true
    delete: false
    format: json
    editor:
      preview: true
    fields:
      - { label: "Category Name", name: "categoryName", widget: "string" }
      - { label: "Category Slug", name: "categorySlug", widget: "string" }
      - {
          summary: "Topics in this Category",
          label: "Topics In Category",
          name: "topicsInCategory",
          widget: "list",
          collapsed: false,
          fields:
            - label: "Topic",
              name: "file",
              widget: "relation",
              collection: "topic",
              search_fields: ["title"],
              value_field: { { filename } },
              display_fields: ["{{title}}"]
        }
1 Like

@tomrutgers Thanks for the explanation. I tried out your suggestion, but I’m getting a YAML syntax error when I try this. The only way the error gets resolved is if the fields property is an object.

YAMLSyntaxError: Flow map contains an unexpected : at line 67, column 20:

            - label: "Topic",

Sorry, I forgot to get rid of the commas

Sorry, @tomrutgers. I’m still getting the same YAML syntax error without the commas.

This is what my YAML looks like.

- name: "category"
  label: "Topic Categories"
  folder: "docs/categories"
  slug: "{{ categoryName }}"
  create: true
  delete: false
  format: json
  editor:
    preview: true
  fields:
      - { label: "Category Name", name: "categoryName", widget: "string" }
      - { label: "Category Slug", name: "categorySlug", widget: "string" }
      - {
          summary: "Topics in this Category",
          label: "Topics In Category",
          name: "topicsInCategory",
          widget: "list",
          collapsed: false,
          fields:
            - label: "Topic"
              name: "file"
              widget: "relation"
              collection: "topic"
              search_fields: ["title"]
              value_field: { { filename } }
              display_fields: ["{{title}}"]
        }
- name: "category"
  label: "Topic Categories"
  folder: "docs/categories"
  slug: "{{ categoryName }}"
  create: true
  delete: false
  format: json
  editor:
    preview: true
  fields:
      - { label: "Category Name", name: "categoryName", widget: "string" }
      - { label: "Category Slug", name: "categorySlug", widget: "string" }
      - summary: "Topics in this Category"
        label: "Topics In Category"
        name: "topicsInCategory"
        widget: "list"
        collapsed: false
        fields:
          - label: "Topic"
            name: "file"
            widget: "relation"
            collection: "topic"
            search_fields: ["title"]
            value_field: "{{filename}}"
            display_fields: ["{{title}}"]

Thank you, @tomrutgers! Your suggestion worked like a charm. And you were so patient. I truly appreciate your time :pray:t5:

No problem, glad it’s working now!