chore: add pagination hangdling to derived data provier

libs/fills/src/lib/fills-data-provider.ts

@@ -136,10 +136,8 @@ export type TradeWithMarketEdge = {
   node: TradeWithMarket;
 };
 
-const getData = (
-  responseData: Fills
-): Fills_party_tradesConnection_edges[] | null =>
-  responseData.party?.tradesConnection?.edges || null;
+const getData = (responseData: Fills): Fills_party_tradesConnection_edges[] =>
+  responseData.party?.tradesConnection?.edges || [];
 
 const getPageInfo = (responseData: Fills): PageInfo | null =>
   responseData.party?.tradesConnection?.pageInfo || null;
@@ -160,20 +158,23 @@ export const fillsProvider = makeDataProvider({
 });
 
 export const fillsWithMarketProvider = makeDerivedDataProvider<
-  TradeWithMarketEdge[],
+  (TradeWithMarketEdge | null)[],
   TradeWithMarket[]
 >(
   [fillsProvider, marketsProvider],
-  (partsData): TradeWithMarketEdge[] =>
-    (partsData[0] as Fills_party_tradesConnection_edges[]).map((edge) => ({
-      cursor: edge.cursor,
-      node: {
-        ...edge.node,
-        market: (partsData[1] as Market[]).find(
-          (market) => market.id === edge.node.market.id
-        ),
-      },
-    })),
+  (partsData): (TradeWithMarketEdge | null)[] =>
+    (partsData[0] as ReturnType<typeof getData>)?.map(
+      (edge) =>
+        edge && {
+          cursor: edge.cursor,
+          node: {
+            ...edge.node,
+            market: (partsData[1] as Market[]).find(
+              (market) => market.id === edge.node.market.id
+            ),
+          },
+        }
+    ) || null,
   (parts): TradeWithMarket[] | undefined => {
     if (!parts[0].isUpdate) {
       return;

libs/fills/src/lib/fills-manager.tsx

@@ -20,7 +20,7 @@ interface FillsManagerProps {
 
 export const FillsManager = ({ partyId }: FillsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const dataRef = useRef<TradeWithMarketEdge[] | null>(null);
+  const dataRef = useRef<(TradeWithMarketEdge | null)[] | null>(null);
   const totalCountRef = useRef<number | undefined>(undefined);
   const newRows = useRef(0);
   const scrolledToTop = useRef(true);
@@ -44,7 +44,7 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
       data,
       delta,
     }: {
-      data: TradeWithMarketEdge[];
+      data: (TradeWithMarketEdge | null)[] | null;
       delta: TradeWithMarket[];
     }) => {
       if (!gridRef.current?.api) {
@@ -70,7 +70,7 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
       data,
       totalCount,
     }: {
-      data: TradeWithMarketEdge[];
+      data: (TradeWithMarketEdge | null)[] | null;
       totalCount?: number;
     }) => {
       dataRef.current = data;
@@ -83,7 +83,7 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
   const variables = useMemo(() => ({ partyId }), [partyId]);
 
   const { data, error, loading, load, totalCount } = useDataProvider<
-    TradeWithMarketEdge[],
+    (TradeWithMarketEdge | null)[],
     TradeWithMarket[]
   >({ dataProvider: fillsWithMarketProvider, update, insert, variables });
   totalCountRef.current = totalCount;

libs/orders/src/lib/components/order-data-provider/order-data-provider.ts

@@ -153,7 +153,7 @@ export const ordersWithMarketProvider = makeDerivedDataProvider<
 >(
   [ordersProvider, marketsProvider],
   (partsData): OrderWithMarketEdge[] =>
-    (partsData[0] as Orders_party_ordersConnection_edges[]).map((edge) => ({
+    (partsData[0] as Parameters<typeof update>['0']).map((edge) => ({
       cursor: edge.cursor,
       node: {
         ...edge.node,

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -16,7 +16,7 @@ interface OrderListManagerProps {
 
 export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const dataRef = useRef<OrderWithMarketEdge[] | null>(null);
+  const dataRef = useRef<(OrderWithMarketEdge | null)[] | null>(null);
   const totalCountRef = useRef<number | undefined>(undefined);
   const newRows = useRef(0);
   const scrolledToTop = useRef(true);
@@ -41,7 +41,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
       data,
       delta,
     }: {
-      data: OrderWithMarketEdge[];
+      data: (OrderWithMarketEdge | null)[];
       delta: OrderWithMarket[];
     }) => {
       if (!gridRef.current?.api) {
@@ -67,7 +67,7 @@ export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
       data,
       totalCount,
     }: {
-      data: OrderWithMarketEdge[];
+      data: (OrderWithMarketEdge | null)[];
       totalCount?: number;
     }) => {
       dataRef.current = data;

libs/react-helpers/src/lib/generic-data-provider.ts

@@ -507,7 +507,7 @@ function makeDerivedDataProviderInternal<Data, Delta>(
       error,
       loading,
       loaded,
-      pageInfo: null,
+      pageInfo: parts[0]?.pageInfo || null,
       ...updateData,
     });
   };
@@ -518,7 +518,7 @@ function makeDerivedDataProviderInternal<Data, Delta>(
       notify(callback, updateData);
     });
 
-  const combine = (updatedPartIndex?: number) => {
+  const combine = (updatedPartIndex: number) => {
     let delta: Delta | undefined;
     let isUpdate = false;
     const isInsert = false;
@@ -538,7 +538,7 @@ function makeDerivedDataProviderInternal<Data, Delta>(
           variables
         )
       : data;
-    if (newLoaded && updatedPartIndex !== undefined) {
+    if (newLoaded) {
       const updatedPart = parts[updatedPartIndex];
       if (updatedPart.isUpdate && updatedPart.delta && combineDelta) {
         delta = combineDelta(parts, variables);
@@ -613,6 +613,7 @@ function makeDerivedDataProviderInternal<Data, Delta>(
           subscription.reload(forceReset)
         ),
       flush: () => notify(callback),
+      load: subscriptions && subscriptions[0]?.load,
     };
   };
 }

libs/trades/src/lib/trades-container.tsx

@@ -20,7 +20,7 @@ interface TradesContainerProps {
 
 export const TradesContainer = ({ marketId }: TradesContainerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const dataRef = useRef<TradeWithMarketEdge[] | null>(null);
+  const dataRef = useRef<(TradeWithMarketEdge | null)[] | null>(null);
   const totalCountRef = useRef<number | undefined>(undefined);
   const newRows = useRef(0);
   const scrolledToTop = useRef(true);
@@ -49,7 +49,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
       data,
       delta,
     }: {
-      data: TradeWithMarketEdge[];
+      data: (TradeWithMarketEdge | null)[];
       delta: TradeWithMarket[];
     }) => {
       if (!gridRef.current?.api) {
@@ -75,7 +75,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
       data,
       totalCount,
     }: {
-      data: TradeWithMarketEdge[];
+      data: (TradeWithMarketEdge | null)[];
       totalCount?: number;
     }) => {
       dataRef.current = data;

libs/trades/src/lib/trades-data-provider.ts

@@ -126,7 +126,7 @@ export const tradesProvider = makeDataProvider({
 });
 
 export const tradesWithMarketProvider = makeDerivedDataProvider<
-  TradeWithMarketEdge[],
+  (TradeWithMarketEdge | null)[],
   TradeWithMarket[]
 >(
   [tradesProvider, marketsProvider],

libs/trades/src/lib/trades-table.tsx

@@ -39,7 +39,10 @@ const changeCellClass =
   };
 
 export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
-  successCallback(rowsThisBlock: TradeWithMarket[], lastRow?: number): void;
+  successCallback(
+    rowsThisBlock: (TradeWithMarket | null)[],
+    lastRow?: number
+  ): void;
 }
 
 export interface Datasource extends IDatasource {