facebook / facebook/relay

Bad typescript type generation for queries with empty variables

Open
#4,111 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

## Current behavior

When using `useLazyLoadQuery` with a Query that has no variables, in a Typescript project, the Relay compiler will output the following type for the variables:

```typescript
export type Component_Query$variables = {};
```

The problem with this type is that it allows the following Typescript code to be valid:

```typescript
const data = useLazyLoadQuery(
graphql`
query Component_Query {
...
}
`,
// the second parameter should be an empty {} object for variables, instead we are passing the options
{ fetchPolicy: 'store-or-network' },
)
```

This is a simple mistake that happened in our codebase, where we forgot to pass an empty argument for `variables`, and instead passed the `options` with a `fetchKey`. This results in valid code that triggers no Typescript errors, however the `fetchKey` is passed as a variable instead of as an option so it does not work. Actually, any attribute can be passed into the variables without triggering any errors

### Expected behavior

The following type or equivalent should be generated

```typescript
export type ChatBubble_CurrentUserQuery$variables = { [K in any]: never };
```

This would allow only an empty object to be valid as variables, so the `useLazyLoadQuery` usage in the example above would be invalid unless fixed to pass an empty object as variables.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.