使用@nuxtjs/apollo时Vue-Apollo无法填充data对象的问题排查

Hey folks, I'm tinkering with a Nuxt project using the @nuxtjs/apollo module to work with vue-apollo, and I've hit two roadblocks that I can't crack alone.

I've got a fully functional GraphQL server running locally at localhost:4000. I followed the official docs to set up my component, wrote a stuff.gql query file, and configured the Apollo client as directed. But here's what's not working:

• Component data isn't being populated: The data I fetch is only showing up in the $apolloData object, not in the stuff array I defined in my component's data() function. I can't access it directly in the template like I expected.
• Limit parameter is ignored: My query is supposed to pull the first 10 "stuff" items, but it's returning every single entry from the backend instead.

I've already tried troubleshooting these issues with:

• Using a function to return query variables (instead of a static object)
• Testing various prefetch settings in the Apollo component configuration

I'm stuck and would love some fresh eyes to point out where I might be going wrong. Below are the key code snippets from my project:

Component Code (pages/stuff.vue) #

<template>
  <div class="stuff-list">
    <ul>
      <li v-for="item in stuff" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import stuffQuery from '~/apollo/queries/stuff.gql'

export default {
  data() {
    return {
      stuff: []
    }
  },
  apollo: {
    stuff: {
      query: stuffQuery,
      variables: {
        limit: 10
      }
    }
  }
}
</script>

GraphQL Query File (apollo/queries/stuff.gql) #

query GetStuff($limit: Int!) {
  stuff(limit: $limit) {
    id
    name
  }
}

Nuxt Apollo Configuration (nuxt.config.js) #

export default {
  // Other Nuxt config...
  modules: [
    '@nuxtjs/apollo',
  ],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:4000/graphql',
      }
    }
  }
}

When I check Vue DevTools, I can see the fetched data sitting in $apolloData.stuff, but my component's stuff array remains empty. Plus, the limit of 10 is completely ignored—all items are coming through. Any thoughts on what I'm missing?

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