gatsby-uc / plugins

Monorepo for plugins in the Gatsby User Collective.
https://gatsbyuc.dev
MIT License
59 stars 34 forks source link

bug(gatsby source strapi): Components within Dynamic Zones are not "getting through" #454

Closed Magnus4p closed 11 months ago

Magnus4p commented 12 months ago

Describe the bug

I have a rather big Single Type in Strapi that has a Dynamic Zone within. When trying to query this component, the components within each of the different components that the Dynamic Zone consists of are not showing at all.

Some more context:

This is how my singletype looks: "kind": "singleType", "collectionName": "cars", "info": { "singularName": "car", "pluralName": "cars", "displayName": "Car", "name": "car" }, "options": { "increments": true, "timestamps": true, "draftAndPublish": false }, "pluginOptions": { "i18n": { "localized": true } }, "attributes": { "carForm": { "pluginOptions": { "i18n": { "localized": true } }, "type": "dynamiczone", "components": [ "forms.car-details", "forms.track-day-details", "forms.refine-your-quote", "forms.additional-drivers", "forms.summary", "car.addition-information", "car.policy-premium-card" ], "required": true },

Also I read about how you should use the "populate" parameter in my gatsby config, and I have tried several versions of this
{
  singularName: "car",
  pluginOptions: {
    i18n: {
      locale: "all", 
    },
  },
  queryParams: {
    populate: {
      carForm: { populate: "*"},
      newAccount: {populate: "*"},
      QuickQuoteSteps: "*",
      manualQuoteSteps: "*"
    }
  }
},

The above actually returns my components for the first component of the dynamic zone However, it does not do the trick for the rest of them

I have also tried to specify that I want to populate on each specific component of the dynamic zone: carForm: { carDetails: {populate: ""}, // I tried both this syntax trackDayDetails: {trackDays: "", quickLinks: "*"}, // as well as this syntax } But this did nothing :(

To Reproduce

Steps to reproduce the behavior:

  1. Have a Single Type that has a Dynamic Zone
  2. The Dynamic Zone should have their own components within (probably also some normal text fields and such)
  3. Query the singletype
  4. See that the components within the Singletype does not show

Expected behavior

I expected my components to be available.

System Info

Please provide information about your site via these means as possible:

System: OS: macOS 12.3.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Shell: 5.8 - /bin/zsh Binaries: Node: 18.17.1 - /var/folders/5l/czwpx5nn00g42t6284rbl50r0000gn/T/yarn--1693908119238-0.2280945295826884/node Yarn: 1.22.19 - /var/folders/5l/czwpx5nn00g42t6284rbl50r0000gn/T/yarn--1693908119238-0.2280945295826884/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Browsers: Chrome: 116.0.5845.140 Safari: 15.4 npmPackages: gatsby: ^5.12.3 => 5.12.3 gatsby-cli: ^5.12.0 => 5.12.0 gatsby-plugin-cookiebot: ^1.0.3 => 1.0.3 gatsby-plugin-copy-files-enhanced: ^1.1.1 => 1.1.1 gatsby-plugin-google-analytics: ^5.12.0 => 5.12.0 gatsby-plugin-google-tagmanager: ^5.12.0 => 5.12.0 gatsby-plugin-image: ^3.12.0 => 3.12.0 gatsby-plugin-manifest: ^5.12.0 => 5.12.0 gatsby-plugin-postcss: ^6.12.0 => 6.12.0 gatsby-plugin-root-import: ^2.0.9 => 2.0.9 gatsby-plugin-sharp: ^5.12.0 => 5.12.0 gatsby-plugin-sitemap: ^6.12.0 => 6.12.0 gatsby-plugin-typescript: ^5.12.0 => 5.12.0 gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.30 => 1.1.30 gatsby-plugin-why-did-you-render: ^2.0.0 => 2.0.0 gatsby-source-filesystem: ^5.12.0 => 5.12.0 gatsby-source-graphql: ^5.12.0 => 5.12.0 gatsby-source-strapi: ^3.3.1 => 3.3.1 gatsby-transformer-remark: ^6.12.0 => 6.12.0 gatsby-transformer-sharp: ^5.12.0 => 5.12.0

Zaya1101 commented 11 months ago

Try using strapi-plugin-populate-deep and then adding queryParams { populate: "deep,10" }

Notaduck commented 11 months ago

Try using strapi-plugin-populate-deep and then adding queryParams { populate: "deep,10" }

Have you tried it yourself? I don't think that is going to do the work since it is a "fix" for strapi but the source plugin doesn't look like it would work with it.

Zaya1101 commented 11 months ago

Try using strapi-plugin-populate-deep and then adding queryParams { populate: "deep,10" }

Have you tried it yourself? I don't think that is going to do the work since it is a "fix" for strapi but the source plugin doesn't look like it would work with it.

I was having issues getting data from relations within components within dynamic zones. Using strapi-plugin-populate-deep with queryParams { populate: "deep,10" } in my Gatsby config fixed the issue.

Magnus4p commented 11 months ago

So, after giving up for my Car singletype, just removing the Dynamic Zone, I gave it another shot once I came to my Header singletype since I actually needed the Dynamic Zone there for functionality reasons.

I ended up fixing the issue. The missing part was the "on" keyword, which when used correctly ended up doing the trick :) However, when using the "on" keyword I found out that you need to specify every single thing afterwards, and cannot just rely on the default population

{
  singularName: "header",
    pluginOptions: {
      i18n: {
        locale: "all", 
      },
    },
    queryParams: {
      populate: {
        MenuItems: {  
          on: {
            "shared.drop-down-menu": { 
              populate: "*"
            },
            "shared.link": { 
              populate: "*"
            },
          },
        },
        UserMenu: {
          populate: "*"
        },
        Logo: "*"
      },
    },
  },

But thank you very much for the suggestion

@KyleAMathews (sorry if Im tagging the incorrect person) Maybe the section about deep queries could be updated to also mention the "on" keyword?