Deep Querying components in Dynamic Zone not working correctly

[DeviantDog]

I have just starting to migrate our new website from 3.6.8 to 4. I was glad to see the beta of the plugin is finally out, However I have run into some road blocks.

We are using quite a few components in strapi and it seems as that as soon as you go deep in the structure of your query it doesn't pick up the nested component or an image for example.

See below for the query's I am trying to make, these are based off of the latest blog example gatsby starter blog

fragment Sections on STRAPI__COMPONENT_SECTIONS_HEROSTRAPI__COMPONENT_SECTIONS_NEED_OUR_HELPSTRAPI__COMPONENT_SECTIONS_RICH_TEXTUnion {
    __typename
    ... on STRAPI__COMPONENT_SECTIONS_RICH_TEXT {
        content {
            data {
                content
              }
        }
      }
    ... on STRAPI__COMPONENT_SECTIONS_NEED_OUR_HELP {
        strapi_component
        breadcrumbTitle {
            title
            colour
            colourOverride
            dashColour
        }
        title {
            text
            style
            colour
            colourOverride
        }
        cards {
          title {
                text
                style
                colour
                colourOverride
            }
            description
            link {
                url
                text
                newTab
                id
            }
            colourOverride
            gradientOverride
            background {
                url
                ext
                formats {
                    large {
                        url
                    }
                    medium {
                        url
                    }
                    small {
                        url
                    }
                }
            }
            size
        }
        link {
            url
            text
            newTab
            id
        }
        backgroundColour
        backgroundColourOverride
    } 
    ... on STRAPI__COMPONENT_SECTIONS_HERO {
        strapi_component
        description
        buttons {
            url
            newTab
            text
            type
        }
        background {
            url
            ext
            formats {
                large {
                    url
                }
                medium {
                    url
                }
                small {
                    url
                }
            }
        }
        title {
            text
            style
            colour
            colourOverride
        }
        overlayGradient
        variation
        backgroundColour
        linkOrder
        foregroundImage {
            id
            url
        }
    }
  }

All the fragment queries work except for the STRAPI__COMPONENT_SECTIONS_NEED_OUR_HELP fragment.

All the fields on this fragment are populated except for the title (component) link (component) and background (image).

I have made sure that all the data is captured in strapi so there are no null fields.

My gatsby config file looks like this

...
collectionTypes: [
        {
            singularName: "page",
            queryParams: {
                publicationState: process.env.GATSBY_IS_PREVIEW
                    ? "preview"
                    : "live",
                populate: {
                    metadata: {
                        populate: "*",
                    },
                    contentSections: {
                        populate: "*",
                    },
                },
            },
        }
    ],
...

Is there some sort of limit to how deep you can query?

[soupette]

@DeviantDog yes there is a limitation in order to query two level of nested components with the following structure:

// api/<content-type>/content-types/<content-type>/schema.json
{
	// ...
	"attributes": {
		"dz": {
	    "type": "dynamiczone",
      "components": [
	      "default.hero",
        "default.compo"
      ]
	 }
	// ...
}

// components/<category>/hero.json

{
  "collectionName": "components_default_heroes",
  "info": {
    "displayName": "hero",
    "icon": "arrow-alt-circle-up",
    "description": ""
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string"
    },
    "avatar": {
      "type": "media",
      "multiple": false,
      "required": false,
      "allowedTypes": [
        "images",
        "files",
        "videos"
      ]
    },
    "sub_hero": {
      "displayName": "sub_hero",
      "type": "component",
      "repeatable": true,
      "component": "default.sub-hero"
    }
  }
}

You can use the following query:

const qs = require('qs');
const query = qs.stringify({
	populate: {
	  dz: {
	    sub_hero: {
	      populate: '*',
			}
    }
  }
}, {
  encodeValuesOnly: true,
});

Let me know if it helps.

[DeviantDog]

Hi @soupette I will try this out and let you know. Thank you for your help!

[DeviantDog]

@soupette I want to try the above, but I am a bit confused. Should this be done in the gatsby config or should this be done as a query on the component?

I am currently trying to do the following with no luck:

//gatsby-config.js

collectionTypes: [
        {
            singularName: "page",
            queryParams: {
                publicationState: process.env.GATSBY_IS_PREVIEW
                    ? "preview"
                    : "live",
                populate: {
                    metadata: {
                        populate: "*",
                    },
                    contentSections: {
                        populate: "*",
                        hero: {
                            populate: "*",
                        },
                        heroSlider: {
                            populate: '*',
                        },
                        richText: {
                            populate: '*',
                        },
                        needOurHelp: {
                            cards: {
                                populate: '*',
                            }
                        }
                    },
                },
            },
        }

I then receive the error:

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "title" on type "STRAPI__COMPONENT_ELEMENTS_CARD".

If you don't expect "title" to exist on the type "STRAPI__COMPONENT_ELEMENTS_CARD" it is most likely a typo.
However, if you expect "title" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "title" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least
one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can
 define the schema for "STRAPI__COMPONENT_ELEMENTS_CARD":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/templates/page.js:48:13

[soupette]

It should be done in your Gatsby config

You have a typo publicationState: process.env.GATSBY_IS_PREVIEW === 'true' ? ...

The error you are having is because some fields of your component are not filled what you can do is to create an entry which has all the fields filled this is a limitation of the current implementation.

You could fix it by either creating an entry with all the field filled or by customising the graphql schemas using the createSchemaCustomisation api in gatsby.

[DeviantDog]

@soupette aside from the typo is this the correct way to do this? I am pretty sure that I did populate everything I will double check.

If for example needOurHelp cards had components nested like title would I have to do the following:

needOurHelp: {
    cards: {
        populate: '*', <- Is this also implied if we are populating children?
        title: {
              populate: '*',
        }
    }
}

[SGiumelli]

@DeviantDog hey sorry to drop in, i hope i wont add confusion to this thread :)

I had the same issue with a dynamic zone and nested component, and for what i understand (after too many fails) is you can populate all your components in the dz whatever the depth.

so i did something like :

dynamicZoneComponent: {
    populate: {
        aDepth1Component: '*',
        aDepth2Component: '*',
        aFileInDepth2Component: '*',
    }
}

so i'd do :

collectionTypes: [
        {
            singularName: "page",
            queryParams: {
                publicationState: process.env.GATSBY_IS_PREVIEW === 'true' ? 'preview' : 'live', // fixed ;)
                populate: {
                    metadata: {
                        populate: "*",
                    },
                    contentSections: {
                        hero: '*',
                        heroSlider: '*',
                        richText: '*',
                        needOurHelp: '*',
                        cards: '*',
                    },
                },
            },
        }

hope it helps

edit : i don't know why but for 1 component i had to do this :

contentSections: {
                        hero: '*',
                        heroSlider: '*',
                        richText: '*',
                        needOurHelp: '*',
                        cards: {
                            populate: {
                                title: '*',
                            },
                        },
                    },

[DeviantDog]

@SGiumelli Thank you I am definitely going to be trying this approach. I am literally in the gatsby conf and asked this question there as well.

[DeviantDog]

@soupette @SGiumelli Its still not working correctly. I even tried the gatsby starter for v4 again and added some "complex" content-types. And just no luck, I am really very surprised, I must be doing something wrong. Something like below which in theory is very simple.

{
  "collectionName": "components_tiered_parent_comps",
  "info": {
    "displayName": "parentComp",
    "icon": "align-left",
    "description": ""
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string"
    },
    "child": {
      "type": "component",
      "repeatable": false,
      "component": "tiered.child-comp"
    }
  }
}

{
  "collectionName": "components_tiered_child_comps",
  "info": {
    "displayName": "childComp",
    "icon": "apple-alt",
    "description": ""
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string"
    },
    "awesome": {
      "type": "boolean"
    },
    "compChild": {
      "type": "component",
      "repeatable": false,
      "component": "tiered.child-child-component"
    }
  }
}

{
  "collectionName": "components_tiered_child_child_components",
  "info": {
    "displayName": "childChildComponent",
    "icon": "arrow-circle-down"
  },
  "options": {},
  "attributes": {
    "age": {
      "type": "integer"
    }
  }
}

I have this on the block-renderer.js file

export const query = graphql`
  fragment Blocks on STRAPI__COMPONENT_SHARED_MEDIASTRAPI__COMPONENT_SHARED_QUOTESTRAPI__COMPONENT_SHARED_RICH_TEXTSTRAPI__COMPONENT_SHARED_SLIDERSTRAPI__COMPONENT_TIERED_PARENT_COMPUnion {
    __typename
    ... on STRAPI__COMPONENT_SHARED_RICH_TEXT {
      richTextBody: body {
        __typename
        data {
          id
          childMarkdownRemark {
            html
          }
        }
      }
    }
    ... on STRAPI__COMPONENT_SHARED_MEDIA {
      file {
        mime
        localFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
    ... on STRAPI__COMPONENT_SHARED_QUOTE {
      title
      quoteBody: body
    }
    ... on STRAPI__COMPONENT_SHARED_SLIDER {
      files {
        id
        mime
        localFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
    ... on STRAPI__COMPONENT_TIERED_PARENT_COMP {
        title
        child {
            title
            childComp {
                age
            }
        }
    }
  }
`

And then finally I did this in my gatsby-config.js file. with a multitude of other variations as well.

blocks: {
    richText: "*",
    quote: "*",
    media: "*",
    slider: "*",
    parentComp: "*"
},

[Oscin]

@DeviantDog I had the same problem as you. My resolution was to add content in Strapi admin. Otherwise it is not visible in the GraphQL explorer and will give an error when using gatsby develop.

I also have multi-level nested components and it worked out to just use an asterisk "*" to query all components (thus no need to specify components below like RichtText, quote, media, slider, parentComp etc.).

Below is my gatsby-config.js (removed some lines for clarity):

const strapiConfig = {
  apiURL: process.env.STRAPI_API_URL,
  accessToken: process.env.STRAPI_TOKEN,
  collectionTypes: [
    {
      singularName: "page",
      queryParams: {
        publicationState: process.env.GATSBY_IS_PREVIEW === 'true' ? "preview" : "live",
        populate: {
          pageContent: {
            populate: "*",
          },
        },
      },
    },
    'section',
  ],
  singleTypes: [
    {
      singularName: "main-menu",
      queryParams: {
        publicationState: process.env.GATSBY_IS_PREVIEW === 'true' ? "preview" : "live",
        populate: {
          body: {
            populate: "*",
          },
        },
      },
    },
  ],
};
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-strapi',
      options: strapiConfig,
    },
  ]
};

[WiktorG]

Any update on this guys? I have similar problem with components in my single type. To simplify this I'll give an example with text field, because it doesn't work either

I decided to create type schema for my graphql endpoints - I have single type called "Home".
It is available under strapiHome in Gatsby's Graphql Playground. I wanted to have null's in fields which were not filled in Strapi. I tried to type it through createTypes function - I reallt want to avoid keeping dummy data in Strapi, since a lot of people are going to use the CMS.

So I did something like this in my gatsby-config.js

const typeDefs = `
type StrapiHome implements Node @infer {
    id: ID!
    textField: String
  }
`

createTypes(typeDefs)

But the field is always missing in my StrapiHome endpoint. However if I do something like this

const typeDefs = `
type STRAPI_HOME implements Node @infer {
    id: ID!
    textField: String
  }
`

createTypes(typeDefs)

The field exists, but it is always null whether data exists or not in CMS. You have any workaround to this problem?

[moonmeister]

Thanks for your interest in this project. This plugin is moving into the Gatsby User Collective and this repo will be archived. Please open an issue in that repository, submit a PR if you'd like to see this implemented, or join us on Discord if you have questions!