Nuxt 3 结合 Apollo、GraphQL 报错：TypeError: _super.call is not a function

问题情况 #

开发Nuxt站点时，通过GraphQL从Strapi CMS拉取单条新闻数据，首次加载页面能正常显示内容，但执行站点生成（nuxt generate）或刷新页面时，会抛出TypeError: _super.call is not a function错误。

相关代码 #

<template>
  <section>
    <NavBar />
    <p>dsfsdfsdfsdf</p>
      <section v-if="websiteOptimaalNieuws.data" :key="websiteOptimaalNieuws.data[0].attributes.slug" class="Nieuwspagina">
        
        <h1>{{ websiteOptimaalNieuws.data[0].attributes.Titel }}</h1>
        
        {{ websiteOptimaalNieuws.data[0].attributes.Artikel }}
      </section>
    <Contactform />
    <Footer />
  </section>
</template>

<script>
import gql from 'graphql-tag'
import NavBar from '../../components/NavBar/NavBar.vue';
import Footer from '../../components/Footer.vue';
import Contactform from '../../components/Contactform.vue';

const SINGLE_NIEUWS_QUERY = gql`
query ($slug:String){
  websiteOptimaalNieuws(filters:{slug:{eq:$slug}}){
    data {
      id,
      attributes {
        Titel,
        slug,
        Artikel,
      }
    }
  }
}
`

export default {
    async asyncData({ app, params }) {
        const client = app.apolloProvider.defaultClient;
        const { slug } = params;
        const res = await client.query({
            query: SINGLE_NIEUWS_QUERY,
            variables: {
                slug,
            },
        });
        const { websiteOptimaalNieuws } = res.data;
        return {
          websiteOptimaalNieuws,
        };
    },
    components: { NavBar, Footer, Contactform }
}
</script>

<style scoped>
 .Nieuwspagina {
  padding-top: 100px;
 }
</style>

错误表现 #

• 浏览器控制台直接抛出TypeError: _super.call is not a function
• Nuxt开发终端在刷新页面或执行生成命令时，也会输出相同错误信息

解决方案 #

1. 检查Apollo依赖版本兼容性

这个错误大概率是@nuxtjs/apollo和apollo-client版本不兼容导致的，尤其是Nuxt 2项目使用了Apollo Client 3.x的情况。建议锁定兼容的版本：

卸载现有依赖：

npm uninstall apollo-client @nuxtjs/apollo

安装指定兼容版本：

npm install @nuxtjs/apollo@4.0.1 apollo-client@2.6.10 graphql-tag@2.12.6

2. 优化数据处理逻辑，增加空值判断

刷新或生成时，如果Strapi返回的数据为空（比如slug不存在），直接访问websiteOptimaalNieuws.data[0]会触发连锁错误。修改asyncData和模板：

修改asyncData：

async asyncData({ app, params }) {
    const client = app.apolloProvider.defaultClient;
    const { slug } = params;
    try {
        const res = await client.query({
            query: SINGLE_NIEUWS_QUERY,
            variables: { slug },
        });
        // 确保数据结构始终存在，避免空值报错
        const websiteOptimaalNieuws = res.data.websiteOptimaalNieuws || { data: [] };
        return { websiteOptimaalNieuws };
    } catch (err) {
        console.error('拉取新闻数据失败:', err);
        // 出错时返回空结构，避免页面崩溃
        return { websiteOptimaalNieuws: { data: [] } };
    }
}

修改模板判断：

<section v-if="websiteOptimaalNieuws.data && websiteOptimaalNieuws.data.length > 0" :key="websiteOptimaalNieuws.data[0].attributes.slug" class="Nieuwspagina">
  <h1>{{ websiteOptimaalNieuws.data[0].attributes.Titel }}</h1>
  {{ websiteOptimaalNieuws.data[0].attributes.Artikel }}
</section>

3. 临时禁用Apollo缓存排查

如果是缓存机制导致的数据不一致，可以在查询时禁用缓存测试：

const res = await client.query({
    query: SINGLE_NIEUWS_QUERY,
    variables: { slug },
    fetchPolicy: 'no-cache' // 强制不使用缓存
});

内容的提问来源于stack exchange，提问作者Jesper