FragmentReference reproduce for relay-tools/relay-compiler-language-typescript

Component.tsx

import { ComponentPaginationQuery } from "./artifacts/ComponentPaginationQuery.graphql";
import { Component_items$key } from "./artifacts/Component_items.graphql";

export function Component(props: { itemsFragment: Component_items$key }) {
  const {
    data: { items },
  } = usePaginationFragment<ComponentPaginationQuery, Component_items$key>(
    graphql`
      fragment Component_items on Viewer
        @argumentDefinitions(
          count: { type: "Int", defaultValue: 10 }
          cursor: { type: "String" }
        )
        @refetchable(queryName: "ComponentPaginationQuery") {
        items(first: $count, after: $cursor)
          @connection(key: "ComponentEdge_items", filters: []) {
          edges {
            node {
              id
            }
          }
        }
      }
    `,
    props.itemsFragment
  );
  return <div />;
}

package-lock.json

{
  "scripts": {
    "compile": "relay-compiler --language typescript --artifactDirectory artifacts --src . --schema schema.graphql"
  },
  "dependencies": {
    "graphql": "^15.0.0",
    "relay-compiler": "^9.0.0",
    "relay-compiler-language-typescript": "^12.0.0",
    "typescript": "^3.8.3"
  }
}

schema.graphql

type Query {
  viewer: Viewer!
}

interface Node {
  id: ID!
}

type Viewer implements Node {
  id: ID!
  items(after: String, first: Int, before: String, last: Int): ItemConnection!
}

type ItemConnection {
  pageInfo: PageInfo!
  edges: [ItemEdge]
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

type ItemEdge {
  node: Item
  cursor: String!
}

type Item implements Node {
  id: ID!
}