Search code examples
vue.jsgraphqlnuxt.jsvue-apollo

Vue-apollo doesn't populate data object


I am experimenting using vue-apollo with nuxt by implementing the @nuxtjs/apollo module. I have a working GraphQL server running on localhost:4000. I wrote the following code :

<template>
  <div>
    <p v-for = "item in stuff" :key="item.id">item.name</p> 
  </div>

</template>

<script>
import stuff from '~/apollo/queries/stuff'

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

stuff.gql :

{
  stuff {
    id
    name
  }
}

client-config :

import { ApolloLink } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default (ctx) => {
  const httpLink = new HttpLink({ uri: 'http://localhost:4000' })


  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    const token = process.server ? ctx.req.session : window.__NUXT__.state.session

    operation.setContext({
      headers: { authorization: `Bearer ${token}` }
    })
    return forward(operation)
  })
  const link = middlewareLink.concat(httpLink)
  return {
    link,
    cache: new InMemoryCache()
  }
}

The observant reader will see that I basically copied the example code from the docs. What I expected to happen was that the data object of my vue component would get updated with the first 10 results of stuff from my backend. However, I see everything in an $apolloData object which is not accessible from the component. Also, the data is not limited to the first 10 entries. Could someone point out what I am doing wrong? Because I don't see it.

I also tried :

apollo: {
  products: {
    query: stuff,
    variables () {
      return {
         limit: 10
      }
    }
  }
}

And with all variations on the prefetch option.


Solution

  • OK, so I installed a fresh version of the nuxt starter template today and migrated only the essentials to get apollo working. It worked immediately. I have no clue what was causing the error and due to the fact that I already had a dozen packages installed we probably will never know.