Creating a Strapi Dynamic Zone & Rendering it in your Nuxt.js App

1

A common challenge one would face when using any CMS is the constant back and forth between developer and content teams. Be it planning and updating content structures in the backend or rearranging content on the frontend of an application, making changes almost always means additional work for both teams. It gets even harder when there is uncertainty around the content structure, how often the content will be updated, and what it will look like. Strapi has an interesting way of making this process more efficient and it comes in the form of a feature called Dynamic Zones.

This is a companion discussion topic for the original entry at https://strapi.io/blog/creating-strapi-dynamic-zone-in-nuxtjs-app#front-6
2

I followed this guide and got a " Cannot read property ‘types’ of undefined" error from apollo.

By the way you’ve written the apollo config, you’re using apollo-client version 2 (according to this: Fragment Matcher | GraphQL Code Generator). That requires specifying the apolloClientVersion in codegen.yml.

After changing it to look like this:

schema: "http://127.0.0.1:1337/graphql"
generates:
  ./fragmentTypes.json:
    plugins:
      - "fragment-matcher"
    config:
      apolloClientVersion: 2

everything works!

Thanks for the guide! It was really helpful to have everything explained all in one place.

2 Likes
3