What should I do when i use fragment and pass variable into fragment?

[youngjaehan]

example query test.graphql

mutation CloneAdSet(
  $input: CloneAdSetInput!
  $includeInsights: Boolean = false
  $timeRange: DateTimeRangeInput
) {
  cloneAdSet(input: $input) {
    adSet {
      ...adSetForCampaignListFragment <- In this, use < $timeRange >
      ...adSetInsightsFragment @include(if: $includeInsights)
      ...adSetLifetimeSpendFragment
    }
  }
}

happend error

8:3  error  Variable "$timeRange" is never used in operation "CloneAdSet"  graphql/template-strings

My .eslintrc.js

module.exports = {
  "root": true,
  "parser": "babel-eslint",
  "rules": {
    "prettier/prettier": ["error", {
      "parser": "babylon"
    }],
    "graphql/template-strings": [
      "error",
      {
        "env": "literal",
        "schemaJson": require('./src/dashboard/api/graphql/tapjoyserverSchema.json')
      }
    ]
  },
  "plugins": [
    "graphql"
  ],
  "overrides": [
    {
      "files": ["src/dashboard/api/graphql/queries/ltv_api/**/*.graphql"],
      "rules": {
        "graphql/template-strings": [
          "error",
          {
            "env": "literal",
            schemaJson: require('./src/dashboard/api/graphql/ltvApiSchema.json')
          }
        ]
      }
    }
  ]
}

What should I do when i use fragment and pass variable into fragment?

[jnwng]

just wanted to confirm that if the fragment is not co-located in the query document, this plugin will throw an error saying that the variable isn't being used.

e.g.,

var query = gql`
  fragment comparisonFields on Hero {
    friendsConnection(first: $first) {
      totalCount
    }
  }
  query HeroComparison($first: Int = 3) {
    hero {
      ...comparisonFields
    }
  }
`;

will not emit a warning about an unused variable, whereas

var fragment = gql`
  fragment comparisonFields on Hero {
    friendsConnection(first: $first) {
      totalCount
    }
  }
`;

var query = gql`
  query HeroComparison($first: Int = 3) {
    hero {
      ...comparisonFields
    }
  }
  ${fragment}
`;

will warn about $first being unused.

i dont have a great solution here, mostly because statically speaking we dont actually know what fragment is referring to thus we can't guarantee that $first actually is being used. which there exists a specification change PR to add the ability to parameterize fragments in this way (which we could catch via static analysis), the only option here is to co-locate the fragment in the GraphQL document, or optionally disable the "NoUnusedVariables" validator completely

hope that helps.

[jmtimko5]

You'll also need to remove the "KnownFragmentNamesRule"