Merge pull request #43 from kleros/fix/faster-chart-loadtime

fix: faster chart loadtime

Author: alcercu

src/app/api/market-chart/route.ts

@@ -1,4 +1,10 @@
-import { NextResponse, NextRequest } from "next/server";
+export const revalidate = 300;
+
+import { NextResponse } from "next/server";
+
+import { markets } from "@/consts/markets";
+
+const chainId = "100";
 
 export async function OPTIONS() {
  return new NextResponse(null, {
@@ -11,17 +17,20 @@ export async function OPTIONS() {
  });
 }
 
-export async function GET(req: NextRequest) {
- const { searchParams } = new URL(req.url);
- const marketId = searchParams.get("marketId");
- const chainId = searchParams.get("chainId");
+export async function GET() {
+ const data = await Promise.all(
+  markets.map(async (market) => {
+  const { marketId } = market;
 
- const upstream = await fetch(
- `https://app.seer.pm/.netlify/functions/market-chart?marketId=${marketId}&chainId=${chainId}`,
+ const upstream = await fetch(
+ `https://app.seer.pm/.netlify/functions/market-chart?marketId=${marketId}&chainId=${chainId}`,
+ { next: { revalidate: 300 } },
+ );
+ return await upstream.json();
+ }),
  );
- const data = await upstream.json();
 
- const res = NextResponse.json(data, { status: upstream.status });
+ const res = NextResponse.json({ data });
  res.headers.set("Access-Control-Allow-Origin", "*");
  return res;
 }

src/hooks/useChartData.ts

@@ -51,46 +51,38 @@ export const useChartData = (markets: Array<IMarket>) =>
  useQuery<IChartData[]>({
  queryKey: [`chart-${markets.map(({ marketId }) => marketId).join("-")}`],
  queryFn: async () => {
- return await Promise.all(
- markets.map(async (market) => {
- const { marketId, maxValue, name, underlyingToken } = market;
- const params = new URLSearchParams();
- params.append("marketId", marketId);
- params.append("chainId", "100");
-
- const rawData: IReturn = await fetch(
- `/api/market-chart?${params.toString()}`,
- ).then((res) => res.json());
-
- const processed: IChartData[""]["data"] = rawData[1].map(
- (dataPoint) => {
- let token0Price = dataPoint.token0Price;
- let token1Price = dataPoint.token1Price;
- const sqrtPrice = dataPoint.sqrtPrice;
- if (
- token0Price === "0" &&
- token1Price === "0" &&
- sqrtPrice &&
- sqrtPrice !== "0"
- ) {
- ({ token0Price, token1Price } = getSqrtPrices(sqrtPrice));
- }
- return {
- timestamp: dataPoint.periodStartUnix,
- value:
- parseFloat(
- (dataPoint.pool.token0.id.toLowerCase() ===
- underlyingToken.toLowerCase()
- ? token0Price
- : token1Price
- ).slice(0, 9),
- ) * maxValue,
- };
- },
- );
-
- return { [name]: { market, data: processed } };
- }),
- );
+ const { data }: { data: IReturn[] } = await fetch("api/market-chart", {
+ next: { revalidate: 300 },
+ }).then((res) => res.json());
+ return data.map((rawData: IReturn, i: number) => {
+ const market = markets[i];
+ const processed: IChartData[""]["data"] = rawData[1].map(
+ (dataPoint) => {
+ let token0Price = dataPoint.token0Price;
+ let token1Price = dataPoint.token1Price;
+ const sqrtPrice = dataPoint.sqrtPrice;
+ if (
+ token0Price === "0" &&
+ token1Price === "0" &&
+ sqrtPrice &&
+ sqrtPrice !== "0"
+ ) {
+ ({ token0Price, token1Price } = getSqrtPrices(sqrtPrice));
+ }
+ return {
+ timestamp: dataPoint.periodStartUnix,
+ value:
+ parseFloat(
+ (dataPoint.pool.token0.id.toLowerCase() ===
+ market.underlyingToken.toLowerCase()
+ ? token0Price
+ : token1Price
+ ).slice(0, 9),
+ ) * market.maxValue,
+ };
+ },
+ );
+ return { [market.name]: { market, data: processed } };
+ });
  },
  });