dotansimha / dotansimha/graphql-code-generator-community
[Typescript React Apollo] Change variables of baseOptions to non optional when required
- 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