dotansimha / dotansimha/graphql-code-generator

When generating queries/mutations and their associated typings, it doesn't honor the actual type

Open
#9,576 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

Hi, I'm not sure if this falls under a bug or if it should be moved to a Q/A discussion, but I wanted to get some insight to how queries and mutations and their types are being generated.

I'm able to generate my types correctly from my server. For example,

```
export type Campaign {
__typename?: 'Campaign';
body?: Maybe;
id: Scalars['ID'];
// ....
}
```

However, when I want to generate a hook, it produces something like this:

```
export type FetchCampaignQuery = {
__typename?: 'Query';
campaign?: {
__typename?: 'Campaign';
body?: string | null
id: string;
// ....
}
```

as a result, when using it, I have to do something like this:

```tsx
const { data, loading } = useFetchCampaignQuery({ variables: { id } });

// ....

return (
setDrawerOpen(false)}
/>
);
```

My assumption was that when generating, it should look something like this:

```
export type FetchCampaignQuery = {
__typename?: 'Query';
campaign?: Campaign;
}
```

Is there a way to get this working as how I might've expected?

### Your Example Website or App

N/A

### Steps to Reproduce the Bug or Issue

N/A

### Expected behavior

As a user, I expected to generate a query hook with the existing typings instead of the individual fields I've queried.

### Screenshots or Videos

_No response_

### Platform

- OS: OSX 13.2
- NodeJS: v18.16.1
- `graphql` version: ^15.3.0
- `@graphql-codegen/*` version(s):
"@graphql-codegen/cli": "^3.3.1",
"@graphql-codegen/typescript": "^3.0.4",
"@graphql-codegen/typescript-graphql-request": "^5.0.0",
"@graphql-codegen/typescript-operations": "^3.0.4",
"@graphql-codegen/typescript-react-apollo": "^3.3.7",

### Codegen Config File

# Change this to true if you want to enable watch mode
watch: false
schema:
- {{server url}}:
headers:
Authorization: Bearer {{insert access token here}}
documents:
- './src/api/graphql/**/*.graphql'
generates:
./src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.