Codegen does not work with fragments from external package

[prztrz]

The issue is apollo codegen throw UnkonwFragment error if fragment is imported from other package.

Intended outcome:

One of my monorepo packages exports fragment field on exported react component like here:

// monorepo/packages/Email/src/index.tsx
import gql from 'graphql-tag';

interface Props {
  data: Data // generated as expected by codegen
}

const Email = ({data}: Props) => <span>email is {data.email}</span>

Email.fragment = gql`
  fragment Email on Query {
    __typename
    email
  }
`

export default Email

so after building (just ts compiler) I want to use this package:

 // monorepo/demo/src/index.tsx
import gql from 'graphql-tag';
import Email from 'email'

const App = ({data}) => <Email data={data} />

App.fragment = gql`
  fragment App on Query {
    ...Email
  }
  ${Email.fragment}
`

I expected that runing apollo codegen in application will generate proper type for data prop in App. Regardless this code works fine and data is fetched exactly as expected.

Actual outcome: Instead of proper code generation i got `unkown fragment error:

.../monorepo/demo/src/index.tsx: Unknown fragment "EmailPreview_data".
{ ToolError: Validation of GraphQL query document failed

Versions

  "apollo": "^2.12.3",
  "graphql": "~14.2.1",
  "graphql-tag": "^2.10.1",
   "react-apollo": "^2.5.6"

[dyatko]

Run into the same issue. Any solutions?

[KirioXX]

I found two options to get this working. Apollo codegen can't find the fragments schema because it's not in the search path.

1. Option: You move codegen to the root of your project and let it generate the type definitions for all packages.
2. Option: You add the fragments to your includes.

I went with the second option because I still want the global types separated for each package. This is my apollo config for the app that wants to import the fragments:

module.exports = {
  client: {
    addTypename: true,
    includes: [
      './App/**/*.{ts,tsx,js,jsx,graphql}',
      './node_modules/mypackage/src/**/*.{ts,tsx,js,jsx,graphql}',
    ],
    exclude: ['./**/*.mocks.{ts,tsx,js,jsx,graphql}'],
    },
  },
};

The only caveat is now that it generates the types for my includes package schemas too every time I run codegen on the app. Nice would be an option like external schemas where it's posible to import external schema defenitions.