Apollo-module: Can`t load .gql files

[robsontenorio]

Version

v4.0.0-beta.5

Reproduction link

https://github.com/nuxt-community/apollo-module

Steps to reproduce

From official example.

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

</template>
<script>
import allCars from '~/apollo/queries/allCars'

export default {

}
</script>

And the query apollo/queries/allCars.gql

{
  allCars {
    id
    make
    model
    year
  }
}

Am i missing something?

What is expected ?

Should import the .gql file

What is actually happening?

This dependency was not found:

• @/apollo/queries/allCars in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/var/www/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/cars.vue

To install it, you can run: npm install --save @/apollo/queries/allCars

Additional comments?

Also including extension .gql does not work.

import allCars from '~/apollo/queries/allCars.gql'

My nuxt.config.js

modules: [
    '@nuxtjs/apollo',
  ],

apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: {
        httpEndpoint: 'http://my-api.com/graphql',
      }
    }
  }

_{This bug report is available on Nuxt community (#c106)}

[dohomi]

have a look how I did it here in the test: https://github.com/nuxt-community/apollo-module/blob/master/test/fixture/pages/index.vue#L40
If that does not work you seem to overwrite the gql loader somewhere

[robsontenorio]

@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)/
        })
      }
    }
  }

[robsontenorio]

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

yarn add graphql-tag

The apollo module was not supposed to manage this dependency?

[dohomi]

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

[robsontenorio]

The first line on README tells that module will manage .gql files. So i got confused. But the additional step solved

[dohomi]

Yes that was wrong I used graphql-tag as devDependencies thats why in my test environment this issue never raised. I made it clear now in the docs

[KevinSupertramp]

Hi, I have the same problem even after installing npm install --save graphql-tag.
nuxt.config.js is the following:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'desc' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
  },

  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    /*extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }*/
  },

  modules: ['@nuxtjs/apollo'],
  apollo: {
    networkInterfaces: {
      default: '~/api/network-interfaces/default.js'
    }
  }
}

The error I get is:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                                            15:21:50

 error  in ./api/queries/posts.gql

Module parse failed: Unexpected token (2:13)
You may need an appropriate loader to handle this file type.
| {
|   posts(first: 10) {
|     id
|     body

Any idea?
Thanks a lot!

[dohomi]

@KevinSupertramp did you try remove and add it again? your issue should be solved by

npm i graphql-tag

[fsc7]

I am receiving this message:
These dependencies were not found:

• ~/apollo/queries/allCars in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/felipe/storage/repos/aramis/frontend/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/car.vue
• ~/apollo/queries/car in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/felipe/storage/repos/aramis/frontend/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/car/_id.vue

To install them, you can run: npm install --save ~/apollo/queries/allCars ~/apollo/queries/car

[fsc7]

If I add the .gql extension I get the same error as @KevinSupertramp .
I already installed graphql-tag with npm but nothing is working.
`
Module parse failed: Unexpected token (2:10)
You may need an appropriate loader to handle this file type.
| {
| allCars {
| id
| make

@ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/felipe/storage/repos/aramis/frontend/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/car.vue 15:0-51
@ ./pages/car.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
`

[dohomi]

@fsc7 try removing rm -rf node_modules and rm package-lock.json and re-install with npm i. Are you using nuxt or nuxt-edge?

[fsc7]

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

[robsontenorio]

Try allCars.gql

See also README issue about loading gql files.

[ndarilek]

So assuming someone has the latest version of this client installed, the latest version of graphql-tag installed, and has blown away/reinstalled node_modules but is still having this issue, what is the recommended fix? First my .gql files weren't found, so I went through everything and added .gql extensions. Now they're not parsing, same error as above.

export default {
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: "%s - WordJammers"
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' },
  modules: [
    "@nuxtjs/dotenv",
    "@nuxtjs/apollo",
    "@nuxtjs/pwa",
    "@nuxtjs/vendor",
    "bootstrap-vue/nuxt"
  ],
  plugins: [
    {src: "~/plugins/ckeditor", ssr: false}
  ],
  apollo: {
    clientConfigs: {
      default: "~/apollo/config.js"
    }
  },
  vendor: [
    "ckeditor"
  ],
  mode: "spa",
  css: [
    "@/assets/scss/global.scss"
  ]
}

apollo/config.js:

export default () => {
  const httpEndpoint = process.server ? `${process.env.BASE_URL}/api` : `${document.location.protocol}//${document.location.host}/api`
  return {
    httpEndpoint,
    tokenName: "token"
  }
}

package.json:

    "@nuxtjs/apollo": "^4.0.0-rc2.3",
    "graphql-tag": "^2.10.0",

Again, node_modules/ thoroughly blown away and reinstalled, nothing. node_modules/graphql-tag is present.

Thanks.

[ndarilek]

Has anyone actually confirmed that this works with Nuxt 2?

I ask because this is the second time I've attempted an upgrade and .gql files don't load. I thought maybe I got something wrong the first time around, but literally all I did was bump from Nuxt 1.4.0 to Nuxt 2.3.0, all dependencies remained the same, and suddenly .gql stopped loading.

The README has a link to an official example, but it's till on an older plugin and uses nuxt-edge.

I'm not convinced this actually works as documented. I'd try to reopen things on cmty.io, but I'm blind and that site has some pretty significant accessibility issues for me.

Thanks for any help.

[dohomi]

@ndarilek I'm using this plugin with latest Nuxt v2. Please try using v4.0.0-rc2.3 and add graphql-tag to your dependencies.
Sorry I haven't touched the testing code for a while-I'm just too busy at work currently..