Filtering dynamic values with the page slug (using Hygraph)

[simona_dimitrova]

I am trying to build a company website with ecommerce products and 2 different blogs, using Hygraph (GraphQl) for Headless CMS. I am not a coder and rely mostly on the visual dev side of Plasmic.

Currently, I am using dynamic data on the home page for repeating elements (the products) and it worked like magic but I am facing issues to build dynamic pages. Here is what I have tried and what I see:

Currently using Data Query on the Page Data and I manage to pass the slug when I click on the link from the overall blog page. However, I don’t seem to be able to override the slug in the URL parameters of the page and the elements in the page cannot be filtered to show the right item. Rather, I always see the preview which I put as default in the query.

CleanShot 2024-07-21 at 19.56.39

Here is the query on the template page:

query MyQuery($slug: String = "zone-of-proximal-development") {
  getFramework(where: {slug: $slug}) {
    category
    id
    slug
    shortDescription
    subtitle
    tag
    title
    contentExplained {
      html
    }
    contentHowToApply {
      html
    }
    contentQuickTip {
      html
    }
    contentWhy {
      html
    }
    visual {
      altText
      height
      mimeType
      url
      width
    }
  }
}

Here is what I see in the Data Picker

The slug is correctly assigned but the specific product is the wrong one, i.e. the slug didn’t overwrite the info in the filter for the query “specificProduct”.

I read the docs on building dynamic pages and the numerous posts here but I am afraid the answer was not clear.
If anyone has an idea what I am missing, I will be very grateful!

Thank you,
Simona

[jason]

Hello Simona, welcome to the Plasmic forum.

I checked our your project and I think you might be missing setting the slug field in the GraphQL query.

[simona_dimitrova]

Thank you, Jason!
That solved it, I had totally missed that field and my brain couldn’t figure out why I am not able to use a dynamic field somewhere to specify the slug, there it was :))

For future reference if this can help anyone in the future - I used the slug coming from the URL parameters and now I can create dynamic pages

Thank you again!