Relay 13: understanding the new Flow types

Hello! 👋 First and foremost, thanks for investing your energy into bringing the new Rust Compiler into OSS world as well. 👍

I have some questions regarding the new compiler and specifically regarding the new Flow types and how to use them. Could you please have a look and share with me if I am using it correctly or not? I feel like I am missing something important because the GraphQL tags are now annotated in the generated file precisely (which is awesome but I am not sure how to use it correctly). 🤔

## `useFragment`

```json5
flowTypegen: {
phase: 'Final',
}
```

Before:

```js
import type { ProductCreateFormData$key } from "./__generated__/ProductCreateFormData.graphql";

const data = useFragment(graphql` … `);
```

After:

```js
import type {
ProductCreateFormData$data,
ProductCreateFormData$fragmentType,
ProductCreateFormData$key, // used for prop annotation
} from './__generated__/ProductCreateFormData.graphql';

const data = useFragment(graphql` … `);
```

Concern: the `*.graphql.js` file already exports the fragment with the fragment type. Should users use it somehow?

```js
module.exports = ((node/*: any*/)/*: Fragment<
ProductCreateFormData$fragmentType,
ProductCreateFormData$data,
>*/);
```

## `useMutation`

Basically no change but only with:

```json5
flowTypegen: {
phase: 'Compat',
}
```

However, with `phase: 'Final'` there is no `*Mutation` type and the only exported types are `*$variables` and `*$data`. How should the "Final" phase be used together with `useMutation`?

Similarly, `usePreloadedQuery` also doesn't generate `*Query` type in the "Final" phase that was previously used like this:

```js
usePreloadedQuery(graphql` … `);
```

🤔

## `useLazyLoadQuery`

Before:

```js
import type { NavigationHeaderBadgeQuery } from "./__generated__/NavigationHeaderBadgeQuery.graphql";

const data = useLazyLoadQuery(graphql` … `);
```

After:

```js
import type {
NavigationHeaderBadgeQuery$data,
NavigationHeaderBadgeQuery$variables,
} from './__generated__/NavigationHeaderBadgeQuery.graphql';

const data = useLazyLoadQuery
NavigationHeaderBadgeQuery$variables,
NavigationHeaderBadgeQuery$data,
>(graphql` … `);
```

Is this the correct way how to use the new types?

Thank you very much for having a look! 😎

Start by comparing the generated *.graphql.js exports with the flowTypegen phases shown in the issue. Then trace the documented usage of useFragment, useMutation, usePreloadedQuery, and useLazyLoadQuery. Done means explaining the correct Final-phase types and usage, including whether the generated fragment annotation should be used.

Written by the indexing model from the issue text.