T
TanStack•9mo ago
sensitive-blue

Has anyone used Table with graphql-code-generator's client preset?

At work, we use TanStack Table as well as the client-preset from graphql-code-generator. This lets us use fragment masking in our GraphQL queries. Basically, each component defines its own GraphQL fragment, and then it has to use an useFragment function to get that data from its props. This doesn't seem to work nicely with TanStack Table. We'll define something like: 
// UserCell.tsx
const Fragment = useGraphql(`
fragment UserCell on UserType {
  firstName
}
`)

function UserCell({
  row: { original }
}: CellContext<FragmentType<typeof Fragment>, unknown>) {
  const user = useFragment(Fragment, original)
  return <p>{user.firstName}</p>
}

// UserTable.tsx
const Fragment = useGraphql(`
fragment UserTable on UserType {
  id
  ...UserCell
}
`)

const columns: DataTableProps<FragmentType<typeof Fragment>>["columns"] = [
  {id: "firstName", accessorKey: "firstName", header: "User", cell: UserCell}
]

export function UserTable({ data }) {
  // assume data is the result of some query that returns a list of users
  const rows = data.map(user => useFragment(Fragment, user))
  // each row now has type ResultOf<typeof Fragment>
  return (
    <DataTable data={rows} columns={columns} ... />
  )
}
// UserCell.tsx
const Fragment = useGraphql(`
fragment UserCell on UserType {
  firstName
}
`)

function UserCell({
  row: { original }
}: CellContext<FragmentType<typeof Fragment>, unknown>) {
  const user = useFragment(Fragment, original)
  return <p>{user.firstName}</p>
}

// UserTable.tsx
const Fragment = useGraphql(`
fragment UserTable on UserType {
  id
  ...UserCell
}
`)

const columns: DataTableProps<FragmentType<typeof Fragment>>["columns"] = [
  {id: "firstName", accessorKey: "firstName", header: "User", cell: UserCell}
]

export function UserTable({ data }) {
  // assume data is the result of some query that returns a list of users
  const rows = data.map(user => useFragment(Fragment, user))
  // each row now has type ResultOf<typeof Fragment>
  return (
    <DataTable data={rows} columns={columns} ... />
  )
}
But there are two type errors: - When we pass in the columns to DataTable, we get Property 'accessorFn' is missing in type 'ColumnDefBase<{ ' $fragmentRefs'?: { UserTableFragment: UserTableFragment; } | undefined; }, any> & StringHeaderIdentifier & ColumnDefMeta' but required in type 'AccessorFnColumnDefBase<Row, any>' - When we define the cell in each column, we get Property 'UserTableFragment' is missing in type '{ UserCellFragment: UserCellFragment; }' but required in type '{ UserTableFragment: UserTableFragment; } Has anyone successfully gotten these two libraries to play nice together?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?