Graphql-code-generator: Unable to find fragment matching then name

[LawJolla]

Describe the bug
When a fragment is imported into a query, the following is returned:

 graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/generated/graphql.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unable to find fragment matching then name "DealFragment"! Please make sure it's loaded.


 Found 1 error

  ✖ src/generated/graphql.tsx
    Error: Unable to find fragment matching then name "DealFragment"! Please make sure it's loaded.

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

type Query {
   deals: [Deal!]
}

type Deal {
   id: ID!
}

1. My GraphQL operations:

# Put your operations here

1. My codegen.yml config file:

overwrite: true
schema: "../admin-server-nexus/src/generated/schema.graphql"
documents:
  - "src/containers/**/*.tsx"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

Expected behavior
Compile generated types

Environment:

• OS: MacOS 10.14.4
• @graphql-codegen/...: 1.0.7
• NodeJS: 11.11

Additional context
The following works when placed in the same file...

// query.tsx
...
const DealFragment = gql`
  fragment DealFragment on Deal {
   id
  }
`

const DEALS = gql`
  query deals {
    deals {
      ...DealFragment
    }
  }
  ${DealFragment}
`

But when DealFragment is imported, it returns the above error. e.g.

// dealFragment.tsx
...
export const DealFragment = gql`
  fragment DealFragment on Deal {
   id
  }
`

// query.tsx
import { DealFragment } from "./dealFragment"
...

const DEALS = gql`
  query deals {
    deals {
      ...DealFragment
    }
  }
  ${DealFragment}
`

Thank you for the brilliant work with this project! It's helped me a ton.

[dotansimha]

Hi @LawJolla , can you please create a small reproduction in a repo? It will make it easier to reproduce 👍

[LawJolla]

https://github.com/LawJolla/graphql-code-generator-error

https://cl.ly/30296b15fc84

[kamilkisiela]

@LawJolla in the issue's description I see you have:

documents: "src/containers/**/*.tsx"

But in your example, you include only one file:

https://github.com/LawJolla/graphql-code-generator-error/pull/1

I included a fragment.tsx and it seems to work.

[LawJolla]

@kamilkisiela
This does work, thank you. I guess it should be obvious that importing the file isn't enough -- the fragment needs to be covered in the documents glob. 🍻