Invalid Interpolation Case

[0xcaff]

Hello, I use fragments the following way. I have the following files:

// `fragments/StatsField.graphql`
fragment StatsFields on SongUserStats {
  id
  playCount
  lastPlayed
  liked
}



// test.js
import StatsFields from './fragments/StatsFields.graphql';

const query = gql`
  query {
    stats {
      ...StatsField
    }
  }

  ${StatsFields}
`;

Linting with the following configuration:

  "graphql/template-strings": [
    "warn",
    {
      "env": "literal",
      "tagName": "gql"
    }
 ]

gives the following warning:

  27:7  warning  Invalid interpolation - not a valid fragment or variable  graphql/template-strings

I'd expect this to work, linting the query with information from the fragment in fragments/StatsField.graphql.

[MichaelSu1983]

I had the same issue. This is a deal breaking to use this library. Is there any way to work around it?

[chrisvoo]

Unfortunately I don't see any other workaround then putting /* eslint-disable graphql/template-strings */ at the top of the file. It's not possible to disable that particular line, because I cannot add javascript comments inside gql blocks.

[nodkz]

Try to review your .eslintrc.js file:

  rules: {
    'graphql/template-strings': [
      'error',
      {
        env: 'apollo', // ☝️ <--- here should be `apollo`, 
                       // maybe you have here a wrong `literal` env value
        tagName: 'gql',
        schemaString: fs.readFileSync(path.resolve(__dirname, './schema.graphql'), 'utf8'),
      },
    ],

[vladcast]

Try to review your .eslintrc.js file:

  rules: {
    'graphql/template-strings': [
      'error',
      {
        env: 'apollo', // ☝️ <--- here should be `apollo`, 
                       // maybe you have here a wrong `literal` env value
        tagName: 'gql',
        schemaString: fs.readFileSync(path.resolve(__dirname, './schema.graphql'), 'utf8'),
      },
    ],

Hi there! I have such config, but I still get Invalid interpolation error.

rules: {
   'graphql/template-strings': [
     'error',
     {
       env: 'apollo',
       tagName: 'gql',
       schemaJson: require('./graphql.schema.json'),
     }
   ]
 }

error Invalid interpolation - fragment interpolation must occur outside of the brackets graphql/template-strings

[callmeberzerker]

Has anyone found a solution to this problem?