Graphql-tag: The webpack loader doesn't work, does it ?

Created on 22 Jan 2017  路  2Comments  路  Source: apollographql/graphql-tag

I have included in my loaders list:

  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  },

And then I import my query like this

import myquery from '../../graphql/myquery.gql'

I know that the loader parses the .gql file, because when the query is misspelled, I get an error.
However in my code I get a plain text string:

console.log(myquery)

data:application/octet-stream;base64,dmFyIGRvYyA9IHsia2luZCI6IkRvY3VtZW50IiwiZGVmaW5pdGlvbnMiOlt7ImtpbmQiOiJPcGVyYXRpb25EZWZpbml0aW9uIiwib3BlcmF0aW9uIjoicXVlcnkiLCJuYW1lIjp7ImtpbmQiOiJOYW1lIiwidmFsdWUiOiJmdWxsUHJvcGVydHkifSwidmFyaWFibGVEZWZpbml0aW9ucyI6W3sia2luZCI6IlZhcmlhYmxlRGVmaW5pdGlvbiIsInZhcmlhYmxlIjp7ImtpbmQiOiJWYXJpYWJsZSIsIm5hbWUiOnsia2luZCI6Ik5hbWUiLCJ2YWx1ZSI6ImlkIn19LCJ0eXBlIjp7ImtpbmQiOiJOb25OdWxsVHlwZSIsInR5cGUiOnsia2luZCI6Ik5hbWVkVHlwZSIsIm5hbWUiOnsia2luZCI6Ik5hbWUiLCJ2YWx1ZSI6IklEIn19fSwiZGVmY [...]

Does it work on your side? I'm on [email protected] and I'm using babel too (don't know if this is related or not).

Most helpful comment

Ah AH ! Found it !!! I had an URL loader which was somehow overloading the graphql-tag one:

  {
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.css$/,
      /\.less$/,
      /\.json$/,
      /\.svg$/
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]'
    }
  },

I had to add /\.(graphql|gql)$/, in the list.
Pfff, lost 2 hours on this :-(

All 2 comments

... actually I just found out that it works on my server built (I'm doing SSR) but not on my client one. Beside I have 2 configs for client builts : one with hotloaders for dev and another one producing static JS. In both cases my console.log returns data:application/octet-stream[...]

Obviously I have something wrong in my configuration. FYI it's a "detached" configuration (and almost unmodified) from create-react-app.

Ah AH ! Found it !!! I had an URL loader which was somehow overloading the graphql-tag one:

  {
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.css$/,
      /\.less$/,
      /\.json$/,
      /\.svg$/
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]'
    }
  },

I had to add /\.(graphql|gql)$/, in the list.
Pfff, lost 2 hours on this :-(

Was this page helpful?
0 / 5 - 0 ratings