import { useCallback } from "react";
import { usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { GlobalEvaluatorsTable_evaluators$key } from "@phoenix/pages/evaluators/__generated__/GlobalEvaluatorsTable_evaluators.graphql";
import { EvaluatorsTable } from "@phoenix/pages/evaluators/EvaluatorsTable";
const PAGE_SIZE = 100;
export const GlobalEvaluatorsTable = ({
query,
}: {
query: GlobalEvaluatorsTable_evaluators$key;
}) => {
const {
data,
hasNext,
isLoadingNext,
loadNext: _loadNext,
refetch: _refetch,
} = usePaginationFragment(
graphql`
fragment GlobalEvaluatorsTable_evaluators on Query
@refetchable(queryName: "GlobalEvaluatorsTableEvaluatorsQuery")
@argumentDefinitions(
after: { type: "String", defaultValue: null }
first: { type: "Int", defaultValue: 100 }
sort: { type: "EvaluatorSort", defaultValue: null }
filter: { type: "EvaluatorFilter", defaultValue: null }
) {
evaluators(first: $first, after: $after, sort: $sort, filter: $filter)
@connection(key: "EvaluatorsTable_evaluators") {
__id
edges {
node {
...EvaluatorsTable_row
}
}
}
}
`,
query
);
const loadNext = useCallback(
(
args: NonNullable<
Parameters<typeof _loadNext>[1]
>["UNSTABLE_extraVariables"]
) => {
_loadNext(PAGE_SIZE, { UNSTABLE_extraVariables: args });
},
[_loadNext]
);
const refetch = useCallback(
(args: NonNullable<Parameters<typeof _refetch>[0]>) => {
_refetch(args, { fetchPolicy: "store-and-network" });
},
[_refetch]
);
return (
<EvaluatorsTable
rowReferences={data.evaluators.edges.map((edge) => edge.node)}
isLoadingNext={isLoadingNext}
hasNext={hasNext}
loadNext={loadNext}
refetch={refetch}
/>
);
};
