Shouldn't react-compiler generate query$data type with the " $data" prop too?
- 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
Assessment
This issue has not been assessed yet.