TransactionList.tsx

import React, { Suspense, useCallback, useState } from 'react';
import { graphql, useLazyLoadQuery, usePaginationFragment } from 'react-relay/hooks';

const TransactionsListPagination = (props) => {
  const {
    data,
    loadNext,
    isLoadingNext,
    hasNext,
    refetch,
  } = usePaginationFragment(
    graphql`
      fragment TransactionsList_query on Query 
      @argumentDefinitions(count: { type: "Int", defaultValue: 5 }, cursor: { type: "String" })
      @refetchable(queryName: "TransactionsListPaginationQuery") {
        transactions(first: $count, after: $cursor, fromUser: $fromUser) 
          @connection(key: "TransactionsList_transactions") {
          totalCount
          edges {
            node {
              id
              fromUser {
                id
                name
                username
              }
              toUser {
                id
                name
                username
              }
              value
              cashback
              message
            }
          }
        }
      }
    `,
    props.query
  );
  
  const [isFetchingTop, setIsFetchingTop] = useState<boolean>(false);

  const onRefresh = useCallback(() => {
    if(isLoadingNext) {
      return ;
    }

    setIsFetchingTop(true);
    const onComplete = () => {
      setIsFetchingTop(false);
    };

    const fetchPolicy = 'network-only';

    refetch({}, { onComplete, fetchPolicy });
  }, [isLoadingNext, isFetchingTop]);

  const onEndReached = useCallback(() => {
    if(isLoadingNext || !hasNext) {
      return ;
    }

    loadNext(5);
  }, [loadNext, isLoadingNext, hasNext]);

  return (
    <div>
      {data.transactions!.edges.map((edge) => (
        <div key={edge!.node.id}>
          <div>
            <strong>From User</strong>
            <span>Name: {edge!.node.fromUser.name}</span>
            <span>Username: {edge!.node.fromUser.username}</span>
          </div>
          <div>
            <strong>To User</strong>
            <span>Name: {edge!.node.toUser.name}</span>
            <span>Uername: {edge!.node.toUser.username}</span>
          </div>
          <strong>Value: {edge!.node.value}</>
          <strong>Cashback: {edge!.node.cashback}</>
          <strong>Message: {edge!.node.message}</>
        </div>
      ))}
      <button oClick={onRefresh}>Refresh</button>
      <button oClick={onEndReached}>Load More</button>
    </div>
  );
};

const TransactionsListLazyLoad = (props) => {
  const query = useLazyLoadQuery(
    graphql`
      query TransactionsListQuery($fromUser: ID!) {
        ...TransactionsList_query
      }
    `,
    { fromUser: props.fromUser },
    { fetchPolicy: 'store-or-network' }
  );
  
  return <TransactionsListPagination query={query} />
};

const TransactionsList = (props) => {
  return (
    <Suspense fallback={<div>loading transactions...</div>}>
      <TransactionsListLazyLoad {...props} />
    </Suspense>
  )
};

export default TransactionsList;