Using code-gen to avoid heuristic GraphQL queries

While developing a Nuxt.js and GraphQL application, the author encountered an error with Apollo Client related to union types in GraphQL queries, specifically when using a self-hosted Headless CMS called Strapi with its Dynamic Zones feature. These Dynamic Zones utilize union types to dynamically manage content components such as images, quotes, or videos, but the default Apollo Client fragment matcher couldn't accurately map these fragments. The solution involved using the IntrospectionFragmentMatcher and setting up GraphQL Code Generator to create an introspection file that helps Apollo Client recognize the potential types within unions, thus facilitating accurate queries. By integrating this setup into the project, the author was able to correctly configure the Apollo Client to handle union types, enabling the rendering of diverse content components on the application's frontend. This experience underscores the importance of understanding GraphQL's union types and leveraging tools like the IntrospectionFragmentMatcher for effective API queries and content management in modern web applications.