Gatsby: [gatsby-source-contentful] Nested references & Arrays

[squaredindex]

Hi, I'm still super new to this stuff and not 100% where to start with displaying Contentful data from References and even the best way to display an array of content, so showing all products in a list rather than just data for a single product.

In my case I'm setting up a small site that has an archive of documents available for download that are oraganised by: Document Type > Year of Publication > Document (labelled by month of publication).

Example:

---

Planning Documents

2018

Jan (Links to document download)
Feb
etc...

2017

Jan
Feb
etc...

---

So I broke those down into references so that new document sections can be added from the documents page.

  query NMODocs {
    contentfulPageNmoDocuments {
      nmoDocsHeading
      documentsSectionReference {
        documentSectionHeading
        documentsYearReference {
          yearHeading
          yearDocumentReference {
            monthOfPublication
            documentFile {
              file {
                url
              }
            }
          }
        }
      }
    }
  }

So with the content I've added as a test so far I get back:

{
  "data": {
    "allContentfulPageNmoDocuments": {
      "edges": [
        {
          "node": {
            "nmoDocsHeading": "No Man's Orchard Documents",
            "documentsSectionReference": [
              {
                "documentSectionHeading": "Minutes",
                "documentsYearReference": [
                  {
                    "yearHeading": "2016",
                    "yearDocumentReference": [
                      {
                        "monthOfPublication": "March",
                        "documentFile": {
                          "file": {
                            "url": "//assets.ctfassets.net/t694z8iqej1y/5ASPzWhh72COk8qKcCIaGk/7966a063875547838709e29bfc81e0bd/No_Man_s_Orchard_Meeting_Minutes_-_March_2016.doc"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "yearHeading": "2015",
                    "yearDocumentReference": [
                      {
                        "monthOfPublication": "September",
                        "documentFile": {
                          "file": {
                            "url": "//assets.ctfassets.net/t694z8iqej1y/68rgD6W6KQU80wYEwss26k/723087fc66e0dcc45a9c63e920335289/No_Man_s_Orchard_Meeting_Minutes_-_September_2015.doc"
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

I don't know if that's the right way to go about structuring my Content Model as this is my first time using Contentful, so any feedback on that would be really helpful. Also so far I've only really displayed single bits of data such as a title or using Markdown Remark to convert markdown into HTML and display that, when it comes to arraying references in references, I'm really not too sure where to start with structuring that, so any info or examples on that again would be really helpful.

[m-allanson]

I haven't used Contentful's references, so I can't comment on that side of things. But in general you might be able to simplify this by flattening your data structure a bit, then using filtering, sorting and variables in your queries to return the data in the shape that you want. Say your Contentful data was structured something like this:

Document
  - document type
  - document year
  - document month
  - document file

Then you could write a query like:

query NMODocs {
  contentfulPageNmoDocuments(
    filter: { section: { eq: "Planning Documents" } }
    sort: { fields: [year], order: DESC }
  ) {
    section
    year
    month
    documentFile {
      file {
        url
      }
    }
  }
}

to get the data you want. That's untested code above, so you'll probably need to modify it a bit. The graphql explorer at http://localhost:8000/___graphql is really useful for experimenting with queries.

Gatsby's GraphQL reference docs might be useful. Possibly also the docs on adding tags to a blog can help with how to deal with collections of data in Gatsby?

[Khaledgarbaya]

Hey @squaredindex,
Khaled here from Contentful,
as @m-allanson you might want to flatten your content model and make it simpler, this will help you and your editor to have a better editing experience.
Start by a flat structure first and then check if there is some repetition in the fields across ContentTypes, is so try to group those repeated fields in one content Types and replace them by just one reference.

Here is how I would approach this :

PlanningDocument

• slug
• documents (multi ref to Document ContentType)

Document

• year
• title
• download link

in the code I would sort the documents by date and display them

[squaredindex]

@m-allanson & @Khaledgarbaya Thank you for your responses and sorry for delayed reply.

I've tried to flatten my Content Model as you both suggested, to the following:

Document

• Type ("Minutes" or "Planning" etc in this case)
• File
• Year
• Month

_I don't need a slug, as I'm not trying to create new pages, basically just organised lists of links to files_

But I haven't found a good way to filter them yet to get my desired outcome.

If I do something like the following, but it ends up not being that useful to me, because I don't seem to be able to use that same code twice in my query, only exchanging "Minutes" for another Document Type, as it will give me the message: "Fields \"allContentfulDocument\" conflict because they have differing arguments. Use different aliases on the fields to fetch both if this was intentional."

    allContentfulDocument(
        filter: {type: {eq: "Minutes"}}, 
        sort: {fields: [year, month], order: DESC}
        )
    {
    edges {
      node {
        type
        year
        month
        file {
          file {
            url
          }
        }
      }
    }
  }

I also would ideally be able to split them into sections by year, so I feel pretty stuck on how to achieve that sort of organisation with this approach.

I'm just trying to make things as simple as possible for the person that will be adding the content. E.g: they add a document, specify the type of document along with the year + month it was published and without the need to add additional queries, it would be sorted into the right section. So far it seems like I'd need to be super specific with my query/filtering to grab the data for each section, which would mean I'd have to keep adding new queries/filters everytime someone wanted to add a new "year" section for instance; that obviously isn't the best.

Feel like I'm just missing some info here though and it should be easily possible to get the outcome I'm looking for here >.<

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!