apollographql / apollographql/apollo-tooling

Codegen does not work with fragments from external package

Open
#1,388 2 comments 19 reactions 0 assignees View on GitHub
🤖 component - codegen
Dominant language
TypeScript
Stars
3k
Forks
460
PR merge metrics
No merged PRs in 30d

Description

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:

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

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

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

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

export default Email
```

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

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

const App = ({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"
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure from monorepo/demo/src/index.tsx using the exported fragment in monorepo/packages/Email/src/index.tsx and the listed Apollo, GraphQL, and graphql-tag versions. Start by tracing Apollo codegen's handling of imported fragment documents; done means codegen accepts the external Email fragment and generates the proper App data prop type without an Unknown fragment error.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.