I can't communicate with my oak backend server in deno's framework fesh

Question

I have a project that consists of 1 oak (express for deno) server, and 1 fresh server. I launch them both through separate commands. On their own, they both work. I can't connect them though. The backend works as demonstrated here. I used postman to get all users.

In my fresh app my routes directory looks like this:

routes
├── about.tsx
├── index.tsx
├── users
│   ├── [id].ts
│   └── [id].tsx
├── sampledata.ts
└── sampledata.tsx

This is what the relevant files look like:
sampledata.tsx:

/** @jsx h */
import { h } from "preact";
import { PageProps } from "$fresh/server.ts";
import Layout from '../components/layouts.tsx';

export default function SampleData({props}:PageProps) {
    console.log(props);
    return (
        <Layout>
            <ul>
                {props.data.map(post => {
                    return <li>{post.email}</li>
                })}
            </ul>
        </Layout>
    )
}

sampledata.ts:

import { Handlers } from "$fresh/server.ts"

export const handler: Handlers = {
    async GET(_req, ctx) {
        const rawPosts = await fetch('http://localhost:4000/users');
        const posts = await rawPosts.json();
        console.log(posts);
        return ctx.render(posts);
    }
}

When I navigate to http://localhost:8000/sampledata I get this:

So why is this failing? How do I do a simple API call from my Fresh app to my Oak server backend?

Answer 1

First I moved sampledata.ts into sampledata.tsx and the resulting files looks like this:

sampledata.tsx

/** @jsx h */
import { h } from "preact";
import { PageProps, Handlers } from "$fresh/server.ts";
import Layout from '../components/layouts.tsx';

export const handler: Handlers = {
    async GET(_,ctx) {
        console.log("the sampledata get request is running");
        const rawPosts = await fetch('http://localhost:4000/users');
        //console.log(rawPosts);
        const posts = await rawPosts.json();
        //console.log(posts);
        return ctx.render(posts);
    }
}


export default function SampleData(props: PageProps) {
    console.log(props);
    return (
        <Layout>
            <ul>
                {props.data.foundUsers.map(post => {
                    return <li>{post.email}</li>
                })}
            </ul>
        </Layout>
    )
}

This worked as I found this in my terminal:

<MYUSERNAME>@<MYCOMPUTERNAME> address-collector % deno task start
Warning deno task is unstable and may drastically change in the future
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 5 routes and 0 islands.
Listening on http://localhost:8000/
the sampledata get request is running
{
  params: {},
  url: URL {
    href: "http://localhost:8000/sampledata",
    origin: "http://localhost:8000",
    protocol: "http:",
    username: "",
Watcher File change detected! Restarting!
Listening on http://localhost:8000/
the sampledata get request is running
{
  params: {},
  url: URL {
    href: "http://localhost:8000/sampledata",
    origin: "http://localhost:8000",
    protocol: "http:",
    username: "",
    password: "",
    host: "localhost:8000",
    hostname: "localhost",
    port: "8000",
    pathname: "/sampledata",
    hash: "",
    search: ""
  },
  route: "/sampledata",
  data: {
    msg: "All users",
    foundUsers: [
      {
        id: 1,
        email: "test1@example.com",
        key: "kythis1",
        user_info: "",
        created_at: "2022-09-06T10:02:55.041Z",
        updated_at: null
      },
      {
        id: 2,
        email: "test2@example.com",
        key: "kythis2",
        user_info: "",
        created_at: "2022-09-06T10:03:02.740Z",
        updated_at: null
      }
    ]
  }
}

The key was changing {props}:PageProps to props: PageProps. That made the fetch run properly. Also as a minor note, I changed props.data.map to props.data.foundUsers.map because I want to map the array of users which is found in foundUsers.