pluckConfig not ignoring other query tags

[carstenblt]

I tried all different combinations of pluckConfig with module and globalIdentifier, at the root of my codegen.yml and under generates but it always still parses my gatsby graphql tags as well and fails.

My codegen.yml config file:

schema:
  - https://backend

generates:
  src/__generated__/apollo-types.tsx:
    pluckConfig:
      modules:
        - name: apollo-boost
          identifier: gql
    documents:
      - src/components/**/*.{ts,tsx}
    plugins:
      - typescript
      - typescript-resolvers
      - typescript-operations
      - typescript-react-apollo

My Typescript:

import { graphql } from "gatsby";
import { gql } from "apollo-boost";

const query = graphql`
  query {
    backend {
      someQuery
  }
  `
const otherQuery = await AClient.query({
      query: gql`{
          someOtherQuery
      }
      `
    });

Expected behavior
Ignoring all other graphql tags, except gql imported from apollo-boost

Environment:

• OS: macOS
• @graphql-codegen/cli: 1.17.8
• NodeJS: v13.13.0

[dotansimha]

I think this one is more relevant for @graphql-tools. @ardatan ?

[ardatan]

@dotansimha Yes I think so :)
@carstenblt Could you share a reproduction CodeSandbox?

[carstenblt]

@ardatan https://codesandbox.io/s/exciting-thunder-gcf0l

example.js contains two queries, one with gatsby's graphql tag, one with Apollo's gql tag. pluckConfig should work so only the gql query is checked. However the invalid query I wrote with graphql throws an error.

[sarink]

If you try to use any of the built-in identifiers, they will conflict with one another, because many tools are hardcoded to look for gql, graphql, and /* GraphQL */, so you first need to disable all of these possibilities, and then come up with your own. This is also why you must disable the magic comment.

  pluckConfig:
    modules:
      - name: src/gql-tag  # name of your import, eg mine is `import { abcgql } from 'src/gql-tag'`
        identifier: abcgql
    gqlMagicComment: __never__ # something that will never be found in your code

# src/gql-tag.ts
# You don't have to do this, I just found it convenient
# import { gql as abcgql } from 'apollo-boost' in the query source file would be fine too

import gqltag from 'graphql-tag';

// In orer to differentiate between which schema we are querying, use different `gql` "tagName"s.

// For mysterious reasons, these names must remain lowercase (or the code-generator will break).

// These tagNames are also referenced in .eslintrc.js so that eslint can validate different queries
// against different schemas too (so if you add one, make sure to add it there as well).

// Since prettier/vscode/et al are only able to recognize formatting/syntax highlighting for a
// hard-coded set of strings (like `gql`, and not `abcgql`, for example), whenever you use
// these you will need to add the "graphql magic comment" /* GraphQL */ after the variable name
// but before the backtick, for the string to be unerstood as graphql.
// Because this magic comment would normally be picked up by the code generator as graphql syntax
// too (resulting in a bunch of queries being parsed twice - once for matching `abcgql`, and
// once for matching the magic comment), in our codegen config files we have specifically overrriden
// the `gqlMagicComment` to something bogus it will never find (like __never__).

export const abcgql = gqltag;
export const defgql = gqltag;
...

Finally, later on, to get syntax highlighting in your IDE (vscode is again hardcoded to look for gql, graphql, and /* GraphQL */), you will need the magic comment (but since you overrode codegen's, it won't try to parse it).

export const MY_QUERY = abcgql/* GraphQL */`
  query SomeQuery {
    ...
  }
`;

Utilizing multiple graphql clients/schemas in the same project is not recommended, but with some work you can still achieve all the same tooling. The above setup will give you syntax highlighting in VSCode, will be recognized by prettier, and you can also configure eslint and the @graphql/template-strings rule to make it work with that as well. I had to dig through the source of all of these projects to figure it out, it took awhile. Hope this helps!

Update: here's how you would configure the eslint rules

    'graphql/template-strings': [
      'error',
      {
        tagName: 'abcgql',
        schemaJson: require('./src/codegen/abc-schema.json'),
      },
      {
        tagName: 'defgql',
        schemaJson: require('./src/codegen/def-schema.json'),
      },
    ],

[dotansimha]

Closing this one here. It's an issue with graphql-tools. @sarink feel free to report it there if it's still relevant!