dotansimha / dotansimha/graphql-code-generator-community

[Typescript React Apollo] Change variables of baseOptions to non optional when required

Open
#130 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

#### Versions
- @graphql-codegen/cli: ^1.21.4
- @graphql-codegen/typescript: ^1.22.0
- @graphql-codegen/typescript-operations: ^1.17.16
- @graphql-codegen/typescript-react-apollo: ^2.2.4

#### Schema
```graphql
query getUser(id: ID!) {
user(id: $id) {
id
name
email
}
}
```

#### Generated code
```typescript
export function useGetUserQuery(baseOptions: Apollo.QueryHookOptions) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery(GetUserDocument, options);
}
```

#### React Code
```typescript
const Foo = () => {
const case1 = useGetUserQuery(); // compile time error (because baseOptions are not provided)
const case2 = useGetUserQuery({}); // run time error (because baseOptions.variables are not provided)
const case3 = useGetUserQuery({ variables: { id: 'BAR' } }); // good
};
```

I think making `case2` compile time error is better than runtime error.
So, I tried to find any options for this, but I couldn't

### Suggestions
- Make VariableRequiredQueryHookOptions interface
- And use the interface as baseOptions type when variables required query

#### Feature: Generated code
```typescript
interface VariableRequiredQueryHookOptions extends Apollo.QueryHookOptions {
variables: Variables;
}

export function useGetUserQuery(baseOptions: VariableRequiredQueryHookOptions) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery(GetUserDocument, options);
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by tracing the typescript-react-apollo generator that produces useGetUserQuery and inspect how its generated Apollo option types handle required variables. Verify the change with a query like getUser(id: ID!), ensuring an empty options object is rejected while options containing variables compile successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, react, typescript
Domain
frontend, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 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.