Fetching API Routes with `useDeno` causes infinite loop

[iFwu]

trafficstars

// api/test.ts
import type { APIRequest } from "https://deno.land/x/aleph/types.ts"

export default async function handler(req: APIRequest) {
  req.status(200).json({ data: 'test' })
}

// pages/index.tsx
import { useDeno } from "https://deno.land/x/aleph/mod.ts";
import React from "https://esm.sh/react";

export default function Home() {
  const testData = useDeno(async () => {
    const { data } = await fetch(
      "http://localhost:8080/api/test",
      { method: "GET" },
    ).then((res) => res.json());
    return data;
  });

  return (
    <div className="page">
      {testData}
    </div>
  );
}

When request http://.../api/test it will send { data: "test" } but after requesting the index page, the server pend all requests.

[ije]

@iFwu thanks, I will try you example later.

[alfredosalzillo]

I have got this error too.

[alfredosalzillo]

I think it's because the API and the pages are served from the same for await loop.

This prevents the API to be served before the page is rendered, causing a waiting loop locking the execution.

The page is waiting for the response of the API that will be executed after the page is rendered.

[alfredosalzillo]

Any news on this?

[ije]

@alfredosalzillo will test later