Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when fragments are separated #528

Closed
alexk111 opened this issue Aug 22, 2018 · 15 comments · Fixed by #546
Closed

Error when fragments are separated #528

alexk111 opened this issue Aug 22, 2018 · 15 comments · Fixed by #546
Labels
plugins waiting-for-release Fixed/resolved, and waiting for the next stable release

Comments

@alexk111
Copy link

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
Copy link

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

@dotansimha
Copy link
Owner

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
Copy link

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

@kamilkisiela
Copy link
Collaborator

#559 should fix it for apollo-angular template

@ganeshpms
Copy link

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
Copy link

ganeshpms commented Sep 7, 2018

fragment (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
Copy link
Collaborator

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

@RyannGalea
Copy link

RyannGalea commented Sep 9, 2018

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
Copy link

@kamilkisiela I am using apollo-angular

@kamilkisiela
Copy link
Collaborator

kamilkisiela commented Sep 11, 2018

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

@RyannGalea
Copy link

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

I was getting the errors using:

@dotansimha
Copy link
Owner

Fixed in 0.12.0

@ganeshpms
Copy link

@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
Copy link

LawJolla commented Apr 8, 2019

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
Copy link
Owner

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
plugins waiting-for-release Fixed/resolved, and waiting for the next stable release
Projects
None yet
8 participants