Error when fragments are separated

[alexk111]

Currently when fragments are stored separately from queries and mutations, the codegen produces a "Unknown fragment ..." error.

Example:

fragment.ts

import gql from 'graphql-tag';

export const userInfo = gql`
  fragment UserInfo on User {
    id
    name
    email
  }
`;

query.ts

import gql from 'graphql-tag';

import { userInfo } from './fragment.ts';

export const userQuery = gql`
  query UserQuery($id: ID!) {
    user(id: $id) {
      ...UserInfo
    }
  }

  ${userInfo}
`;

[ganeshpms]

When is this planned to release? Is there any prerelease version available

[dotansimha]

For now, we released an alpha version with a fix for this:

Successfully published:
 - graphql-code-generator@0.12.0-alpha.821f12df
 - graphql-codegen-compiler@0.12.0-alpha.821f12df
 - graphql-codegen-core@0.12.0-alpha.821f12df
 - codegen-templates-scripts@0.12.0-alpha.821f12df
 - graphql-codegen-introspection-template@0.12.0-alpha.821f12df
 - graphql-codegen-apollo-angular-template@0.12.0-alpha.821f12df
 - graphql-codegen-typescript-mongodb-template@0.12.0-alpha.821f12df
 - graphql-codegen-typescript-react-apollo-template@0.12.0-alpha.821f12df
 - graphql-codegen-typescript-template@0.12.0-alpha.821f12df

@ganeshpms

[emmanuelbuah]

Run into this as well but the alpha builds resolve it. Thanks.

[kamilkisiela]

#559 should fix it for apollo-angular template

[ganeshpms]

Thanks for the Alpha versions.
Error: Property 'definitions' does not exist on type '{ new (): Document; prototype: Document; }' with Alpha version on the generated code. Which version of typescript is recommended?

[ganeshpms]

(With the alpha versions)
As seen in the attachment the

1. Document is conflicting with the typescript's dom Document type. Please add the <namepace>.Docuemnt.definition.
2. The generated code adds the same fragment multiple time as I have used the fragment Measurement in multiple places in my query. , is missing when there are two are more fragments.
3. In line number 1830, I had to add : DocumentNode to get rid of type conflict error.
4. Unable to use the fragment from other gql file. For example If I use the Measurement fragment from query1.gql in query2.gql. The generated code is missing the fragment in the query2 service. At the same time if I copy the fragment in query2.gql (as a workarround) it also fails with duplicate type declaration.

Could you please have a look on these?

[kamilkisiela]

I only updated apollo-angular template and you're probably using React?

[RyannGalea]

I'm getting the same issues at the moment after using the alpha to get fragments working properly.

Generates fine but getting the type error as above

ERROR in src/client/app/core/graphql.ts(3064,3): error TS2416: Property 'document' in type 'AllChatsGQL' is not assignable to the same property in base type 'Query<Query, Variables>'. [2] Type '{ kind: string; definitions: any[]; }' is not assignable to type 'DocumentNode'. [2] Types of property 'kind' are incompatible. [2] Type 'string' is not assignable to type '"Document"'.

src/client/app/core/graphql.ts(3066,31): error TS2339: Property 'definitions' does not exist on type '{ new (): Document; prototype: Document; }'. [2] src/client/app/core/graphql.ts(3087,3): error TS2416: Property 'document' in type 'ChatByIdGQL' is not assignable to the same property in base type 'Query<Query, Variables>'. [2] Type '{ kind: string; definitions: any[]; }' is not assignable to type 'DocumentNode'. [2] Types of property 'kind' are incompatible. [2] Type 'string' is not assignable to type '"Document"'.

src/client/app/core/graphql.ts(3089,31): error TS2339: Property 'definitions' does not exist on type '{ new (): Document; prototype: Document; }'. [2] src/client/app/core/graphql.ts(3109,3): error TS2416: Property 'document' in type 'SaveChatGQL' is not assignable to the same property in base type 'Mutation<Mutation, Variables>'. [2] Type '{ kind: string; definitions: any[]; }' is not assignable to type 'DocumentNode'. [2] Types of property 'kind' are incompatible. [2] Type 'string' is not assignable to type '"Document"'.

[ganeshpms]

@kamilkisiela I am using apollo-angular

[kamilkisiela]

@ganeshpms do you use noGraphqlTag option? And which version you exactly use?

[RyannGalea]

I am also using apollo-angular, I am not doing the 'noGraphqlTag',
"apollo-angular": "^1.3.0",

I was getting the errors using:

• along with trying to use fragments.
  "graphql-code-generator@0.12.0-alpha.821f12df"
  "graphql-codegen-apollo-angular-template@0.12.0-alpha.821f12df"

[dotansimha]

Fixed in 0.12.0

[ganeshpms]

@kamilkisiela , I am not using noGraphQLTag.

The versions are
"graphql-code-generator": "^0.12.0-alpha.821f12df",
"graphql-codegen-apollo-angular-template": "^0.12.0-alpha.821f12df",

Also, the issue #4 that I mentioned is resolved by using #import './fragment/measurement.gql' other fixes for #1,#2, #3 are still needed. I just mannually fix them after generated.

[LawJolla]

I'm getting this error. Version 1.0.6 with 1.0.6 versions of typescript and typescript-react-apollo

Works

// query.ts

const DealFragment = gql`
  fragment DealFragment on Deal {
    id
  }
`

const DEALS_FOR_VEHICLE = gql`
  query dealsForVehicle($vehicleId: ID!) {
    deals(where: { vehicles_every: { id: $vehicleId } }) {
      __typename
      ...DealFragment
    }
  }
  ${DealFragment}
`

// query.ts

import gql from "graphql-tag"
import { DealFragment} from "./dealFragment"

const DEALS_FOR_VEHICLE = gql`
  query dealsForVehicle($vehicleId: ID!) {
    deals(where: { vehicles_every: { id: $vehicleId } }) {
      __typename
      ...DealFragment
    }
  }
  ${DealFragment}
`

// dealFragment.ts
import gql from "graphql-tag"

export const DealFragment = gql`
  fragment DealFragment on Deal {
    id
  }
`

Returns

$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/generated/graphql.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Cannot read property 'onType' of undefined


 Found 1 error

  ✖ src/generated/graphql.tsx
    TypeError: Cannot read property 'onType' of undefined

codegen.yml

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

Thanks for the amazing work!

[dotansimha]

@LawJolla In 1.0.7 we fixed that, now you'll get a more readable error with the missing fragment name.
If you are still having issues, please open a new issue because this one is closed and outdated.