facebook / facebook/relay

Shouldn't react-compiler generate query$data type with the " $data" prop too?

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

Description

I'm confused why the generated types from query is missing the " $data" property. Like this:

```
export type NewProductReviewScreenInitialQuery$data = {
readonly product: {
readonly " $fragmentSpreads": FragmentRefs<"NewProductReviewScreen_ProductFragment">;
} | null | undefined;
readonly review: {
readonly " $fragmentSpreads": FragmentRefs<"NewProductReviewScreen_ReviewFragment">;
} | null | undefined;
};
```

The above was generated from a `usePreloadedQuery` like this

```
export const newProductReviewScreenInitialQuery = graphql`
query NewProductReviewScreenInitialQuery(
$reviewId: UUID!
$productId: UUID!
) {
product(id: $productId) {
...NewProductReviewScreen_ProductFragment
}
review(id: $reviewId) {
...NewProductReviewScreen_ReviewFragment
}
}
`;

const fragRef = usePreloadedQuery(
newProductReviewScreenInitialQuery,
queryRef
);
```

So the type for `fragRef.product` would be

```
{
readonly " $fragmentSpreads": FragmentRefs<"NewProductReviewScreen_ProductFragment">;
}
```

I think this is wrong.

The `@types/react-relay/relay-hooks/useFragment.d.ts` contains

```
export function useFragment(
fragmentInput: GraphQLTaggedNode,
fragmentRef: TKey,
): KeyTypeData;
```

and `@types/react-relay/relay-hooks.helpers.td.ts` contains

```
export type KeyType = Readonly<{
" $data"?: TData | undefined;
" $fragmentSpreads": FragmentType;
}>;

export type KeyTypeData, TData = unknown> = Required[" $data"];
```

This is implying to me that the `useFragment` requires the `fragRef.product` to be generated with the corresponding `" $data"` property. Otherwise, I always have to explicitly provide the `...$key` type in order to use `useFragment`:

```
const productProfileData = useFragment(
graphql`
fragment NewProductReviewScreen_ProductFragment on Product {
ofVendor {
ofUser {
firstName
}
}
}
`,
fragRef.product
);
```

Without the `` explicitly provided, the return value is `unknown`.

Versions:

@types/react-relay@18.2.0
@react-relay@18.2.0
@relay-compiler@18.2.0

```

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.