Graphql-tag: Can't use .gql file within .vue file in Nuxt ("Syntax Error GraphQL Unexpected Name 'var'")

[adamkhan]

I'm trying to import a minimal .gql file into a Nuxt page but get the following error:

ERROR  Failed to compile with 1 errors                                                                    

error  in ./queries/activities.gql

Module build failed: GraphQLError: Syntax Error GraphQL request (2:5) Unexpected Name "var"

1:
2:     var doc = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allActivities"},"variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":null,"name":{"kind":"Name","value":"activities"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":null,"name":{"kind":"Name","value":"Title"},"arguments":[],"directives":[],"selectionSet":null},{"kind":"Field","alias":null,"name":{"kind":"Name","value":"Slug"},"arguments":[],"directives":[],"selectionSet":null},{"kind":"Field","alias":null,"name":{"kind":"Name","value":"Blurb"},"arguments":[],"directives":[],"selectionSet":null}]}}]}}],"loc":{"start":0,"end":71}};
^[can't get arrow pointing where it should, it's under the comma before the final appearance of "arguments"]
3:     doc.loc.source = {"body":"query allActivities {\n  activities {\n    Title\n    Slug\n    Blurb\n  }\n}","name":"GraphQL request","locationOffset":{"line":1,"column":1}};

The code in the .gql file:

query {
  activities {
    Title,
    Slug,
    Blurb
  }
}

The code in the Nuxt page:

import allActivities from '@/queries/activities.gql';
export default {
  apollo: {
    activities:
    {
      query: allActivities
    }
  }
}

The query does work when it's within the Nuxt page:

import gql from 'graphql-tag'; 
export default {
  apollo: {
    activities: {
      query: gql
        `query {
           activities {
             Title,
             Slug,
             Blurb
          }
        }`
     }
  }
}

Could this be due to something wrong with my build?

Issue Labels

• [ ] has-reproduction
• [ ] feature
• [ ] docs
• [ ] blocking
• [ ] good first issue

[darrist]

+1, having issue where nuxt could sometime recognise, sometime not. Not sure how to reproduce. I have tried the followings with no luck:

    extend(config, { isDev, isClient }) {
      // Common aliases
      config.resolve.alias["~apollo"] = path.join(
        this.options.srcDir,
        "apollo"
      );
      config.resolve.alias["~queries"] = path.join(
        this.options.srcDir,
        "apollo",
        "queries"
      );
      if (isDev && isClient) {
        // GraphQL
        config.module.rules.push({
          test: /\.(graphql|gql)$/,
          use: ["graphql-tag/loader"]
        });
....

[KevinSupertramp]

Same problem here. Any luck?
Thank you!

[charles-mathieus-jomedia]

I seem to have this issue as well, can't figure it out...

[yutahaga]

If you are using @nuxtjs/apollo you do not need to add rule. Because @nuxtjs/apollo internally adds graphql-tag/loader. We only need to install graphql-tag.

[adamkhan]

@yutahaga Yes yes yes! Thank you, now works for me. So we'd been trying too hard. I removed from build in nuxt.config.js the extension for graphql-tag/loader and all is well.

[abattenburg]

@adamkhan I'm not sure I understand your fix. I have nothing in nuxt.config.js referencing 'graphql-tag'. When I first start up Nuxt I get no issues. However, whenever I make a fix in my nuxt.config.js I get this error.

Are you still running into this?

[adamkhan]

@abattenburg For me it _never_ worked until I removed graphql-tag/loader — are you saying that it works for you until you make a change in nuxt.config.js? Sounds like you could be adding something malformed to that file?

[abattenburg]

Interesting. I don't think that I'm adding anything malformed (it's exactly the same as other working projects), but it is possible. For now it's not much of an annoyance so I think I'll leave it be. Thanks for the suggestions @adamkhan

[rikoz]

Having the same issue in my nuxt , it says:
Module build failed: GraphQLError: Syntax Error: Unexpected Name "var"

@adamkhan Please help drop a complete fix proceedure

[adamkhan]

@rikoz, as @yutahaga explained, it seems the problem is that something is being run twice, so we need ensure we're not loading graphql-tag/loader if we're already using @nuxtjs/apollo. So if I remember correctly I just checked my nuxt.config.js, package.json and package-lock.json files, doing a search for "graphql", and made sure to remove any instance of graphql-tag/loader. This worked for me.

[rikoz]

@adamkhan Thanks, It Worked

[adamkhan]

@rikoz Great