apollo: Can`t load .gql files

@robsontenorio not everybody is using *.gql files so its not part of the module. I will add note thanks for bringing this up

Ok, the problem is: an additional step is required.

yarn add graphql-tag

The apollo module was not supposed to manage this dependency?

Hello, Thanks for your help. I was using nuxt.config.js this way https://github.com/nuxt/nuxt.js/blob/dev/examples/vue-apollo/nuxt.config.js For some reason, it does not work. I replaced with your version of nuxt.config and it is working now. Thanks

@dohomi no lucky with relative folder, and .gql extension on import statement as suggested.

Step by step

Create a nuxt app with yarn.

yarn create nuxt-app my-app

Options:

On my-app folder, update nuxt version to 1.4.1 and add apollo module

yarn add nuxt @nuxtjs/apollo

On nuxt.config.js

modules: [
    '@nuxtjs/apollo',
  ],
  
  apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: {
        httpEndpoint: 'http://my-api.com/graphql',
      }
    }
  },

Create apollo/queries/allCars.gql

{
  allCars {
    id
    make
    model
    year
  }
}

Create pages/cars.vue

<template>
  <div>
    ...
  </div>
</template>

<script>
import allCars from '../apollo/queries/allCars.gql'
// or
import allCars from '~/apollo/queries/allCars'


export default {

}
</script>

Note

With create-nuxt-app the nuxt.config.js has this default entry. Maybe something here is causing problem on gql loader?

build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }