I took more time than I should have taken while trying to build an orders page with pagination using a React and NestJS with typescript.
Between very few references and average documentations, I'm sure this article could be helpful to someone else who endup in this situation (or better I might endup losing this code and would need a place to find this), so why not write an article about it!
I was using NestJS for backend, but anyone using any other node framework could easily follow this, and I'm using Shopify Polaris for frontend components.
For the sake of simplicity, I'm only adding important Code Blocks here
Backend Function
pageSize = 25;
async fetchOrders(
gqlClient: GraphqlClient,
cursor: NullableString = null,
direction: NullableString = FetchDirection.FORWARD,
) {
const [first, last, after, before] =
direction === FetchDirection.FORWARD
? [this.pageSize, null, cursor, null]
: [null, this.pageSize, null, cursor];
try {
const response = await gqlClient.query<OrdersResponse>({
data: {
query: `query GetOrders($first: Int, $last: Int, $before: String, $after: String) {
orders(first: $first, last: $last, before: $before, after: $after) {
edges {
cursor
node {
id
name
customer {
firstName
lastName
}
displayFinancialStatus
displayFulfillmentStatus
totalPriceSet {
presentmentMoney {
amount
}
}
createdAt
}
}
pageInfo {
hasNextPage
hasPreviousPage
}
}
}`,
variables: {
first,
last,
before,
after,
},
},
});
return response.body.data.orders;
} catch (error) {
throw new InternalServerErrorException(error);
}
}
Frontend Components
export default function OrdersPage() {
const fetch = useAuthenticatedFetch();
const [searchParams] = useSearchParams({});
const [hasNextPage, sethasNextPage] = useState<boolean>(false);
const [hasPreviousPage, setHasPreviousPage] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [orderEdges, setOrderEdges] = useState<OrderEdge[]>([]);
const fetchOrders = useCallback(
async (
direction: NullableString = "forward",
cursor: NullableString = "",
) => {
setIsLoading(true);
let fetchUrl;
if (direction && cursor) {
fetchUrl = `/api/orders/?cursor=${cursor}&direction=${direction}`;
} else {
fetchUrl = "/api/orders";
}
try {
const { edges, pageInfo }: OrdersResponse = await fetch(fetchUrl, {
method: "GET",
}).then((res) => res.json());
setOrderEdges(edges);
sethasNextPage(pageInfo.hasNextPage);
setHasPreviousPage(pageInfo.hasPreviousPage);
setIsLoading(false);
return;
} catch (error) {
console.error(error);
setIsLoading(false);
return;
}
},
[],
);
useEffect(() => {
const cursor = searchParams.get("cursor");
const direction = searchParams.get("direction");
fetchOrders(direction, cursor);
}, [searchParams]);
return (
<Page>
<TitleBar title="Orders" />
<Layout>
<Layout.Section>
<OrdersTable
orderEdges={orderEdges}
hasNextPage={hasNextPage}
hasPreviousPage={hasPreviousPage}
loading={isLoading}
/>
</Layout.Section>
</Layout>
</Page>
);
}
const resourceName = {
singular: "order",
plural: "orders",
};
interface OrdersTableProps {
orderEdges: OrderEdge[];
hasNextPage: boolean;
hasPreviousPage: boolean;
loading: boolean;
}
export function OrdersTable({
orderEdges,
hasNextPage,
hasPreviousPage,
loading,
}: OrdersTableProps) {
const [_, setSearchParams] = useSearchParams({});
const resourceIDResolver = (order: OrderEdge) => {
return order.node.id;
};
const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(orderEdges, {
resourceIDResolver,
});
const indexTableRowMarkup = useMemo(() => {
return orderEdges.map(
(
{
node: {
id,
name,
createdAt,
customer,
displayFinancialStatus,
displayFulfillmentStatus,
totalPriceSet: {
presentmentMoney: { amount },
},
},
},
index,
) => {
const customerFullName =
customer &&
`${customer?.firstName || ""} ${customer?.lastName || ""}`.trim();
const financialStatusForDisplay =displayFinancialStatus
.split("_")
.map((piece) => capitalize(piece))
.join(" ");
const financialStatusBadgeType = displayFinancialStatus === FinancialStatus.PAID
? "success"
: undefined;
const fulfillmentStatusBadgeType = displayFulfillmentStatus === FulfillmentStatus.FULFILLED
? "success"
: undefined;
return (
<IndexTable.Row
id={id}
key={id}
selected={selectedResources.includes(id)}
position={index}
>
<IndexTable.Cell>
<TextStyle variation="strong">{name}</TextStyle>
</IndexTable.Cell>
<IndexTable.Cell>
{new Date(createdAt).toLocaleDateString()}
</IndexTable.Cell>
<IndexTable.Cell>{customerFullName}</IndexTable.Cell>
<IndexTable.Cell>
<Badge status={financialStatusBadgeType}>
{financialStatusForDisplay}
</Badge>
</IndexTable.Cell>
<IndexTable.Cell>
<Badge status={fulfillmentStatusBadgeType}>
{capitalize(
(displayFulfillmentStatus as FulfillmentStatus) ||
"unfulfilled",
)}
</Badge>
</IndexTable.Cell>
<IndexTable.Cell>{amount}</IndexTable.Cell>
</IndexTable.Row>
);
},
);
}, [orderEdges, selectedResources]);
return (
<Card sectioned>
<IndexTable
resourceName={resourceName}
itemCount={orderEdges.length}
selectedItemsCount={
allResourcesSelected ? "All" : selectedResources.length
}
onSelectionChange={handleSelectionChange}
headings={[
{ title: "Order" },
{ title: "Date" },
{ title: "Customer" },
{ title: "Payment Status" },
{ title: "Fulfillment Status" },
{ title: "Total" },
]}
loading={loading}
>
{indexTableRowMarkup}
</IndexTable>
<div className={styles.paginationWrapper}>
<Pagination
hasPrevious={hasPreviousPage}
hasNext={hasNextPage}
onPrevious={() => {
const cursor = orderEdges[0].cursor;
setSearchParams({ cursor, direction: "backward" });
}}
onNext={() => {
const cursor = orderEdges[orderEdges.length - 1].cursor;
setSearchParams({ cursor, direction: "forward" });
}}
/>
</div>
</Card>
);
}
Top comments (0)