"Typed List" Netlify CMS fields all share a common Graphql type, making fragment usage difficult

[dpolant]

Summary

This specifically pertains to gatsby-plugin-netlify-cms

When working with a "typed list" field (see https://github.com/netlify/netlify-cms/blob/master/dev-test/config.yml#L212), the objects saved in the typed list all have the same graphql data type, making it difficult to craft Graphql fragments that respond to different types of objects.

Relevant information

My goal is to display a set of page component similar to what you'd get from Drupal Paragraphs module, or a multi-component reference field in Contentful. With those systems, I've taken an approach in Gatsby where I craft graphql fragments that respond to the different types of Paragraph entities or Contentful content.

Here's an example for Contentful:

export const quoteFragment = graphql`
  fragment quoteFragment on ContentfulQuote {
    quote
    name: author
    job: jobTitle
  }
`;

This lets me run specific Graphql for the "Quote" component.

So I'm trying to do something similar with Netlify CMS as the source, and having trouble. I'm looking for either:

• Advice on a different way to do a component-driven page display that doesn't require a different Graphql type per component object.
• A way to set unique types per object instead of the default MarkdownRemarkFrontmatterContent.

Here is the relevant portion of my config.yml:

  - name: "game"
    label: "Game"
    folder: "src/pages/game"
    create: true
    slug: "{{slug}}"
    fields:
    - {label: "Template Key", name: "templateKey", widget: "hidden", default: "game"}
    - {label: "Title", name: "title", widget: "string"}
    - label: "Content"
      name: "content"
      widget: "list"
      types:
        - label: "Text block"
          name: "textBlock"
          widget: "object"
          fields:
            - {label: "Text", name: "text", widget: "markdown", buttons: [bold, heading-two, bulleted-list, numbered-list]}
        - label: "Image"
          name: "image"
          widget: "object"
          fields:
            - {label: "Image", name: "image", widget: "image"}
            - {label: "Caption", name: "caption", widget: "string"}
        - label: "Text block 2"
          name: "textBlock2"
          widget: "object"
          fields:
            - {label: "Text", name: "text", widget: "markdown", buttons: [bold, heading-two, bulleted-list, numbered-list]}

Here is an example piece of content data returned from graphql:

{
          "frontmatter": {
            "content": [
              {
                "__typename": "MarkdownRemarkFrontmatterContent",
                "caption": null,
                "text": "TEST first one",
                "image": null
              },
              {
                "__typename": "MarkdownRemarkFrontmatterContent",
                "caption": "Blasting stormtroopers on the top of the first level.",
                "text": null,
                "image": {
                  "id": "18972436-54a7-58d1-8975-dbe1593e6b97"
                }
              },
              {
                "__typename": "MarkdownRemarkFrontmatterContent",
                "caption": null,
                "text": "TEST",
                "image": null
              }
            ]
          }
        }

The trouble is that since the Graphql type of each object is MarkdownRemarkFrontmatterContent, I can't use the Graphql "On" syntax to handle the data in each object.

Here's an example of how one would do this with Contentful as a source: https://medium.com/@Zepro/contentful-reference-fields-with-gatsby-js-graphql-9f14ed90bdf9

Thanks!

[LekoArts]

Hi!

I have difficulties following your train of thought, could you please explain your issue with more code, error messages or pointers to the relevant code in your example? Thanks!

[dpolant]

I'm wondering how to do something like this, but with Netlify CMS source: https://medium.com/@Zepro/contentful-reference-fields-with-gatsby-js-graphql-9f14ed90bdf9

The trouble I run into is that this kind of approach relies on each page "section" having a unique Graphql type, whereas in Netlify CMS if you use an object list field, the objects all have a common Graphql type.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[PetroPavlenko]

@dpolant Have you tried using sourceNodes ? https://stackoverflow.com/questions/51269168/how-to-use-graphql-fragment-on-multiple-types?answertab=active#answer-55412140 ?