#API Routes Not Found. Can You Help?

6 messages · Page 1 of 1 (latest)

sage lantern
#

I've created a very simplified example to explain the errors I'm receiving when trying to create an API route.

First, I created an API route in routes/api/create-payment-intent.ts. This route just logs the request body to keep things simple.

"use server";
import { type APIEvent } from "@solidjs/start/server/types";

export async function POST({ request }: APIEvent) {

  console.log(request.body);

}

I've also created a page "StripePage" that uses fetch to make and HTTP POST request to the /api/create-payment-intent endpoint.

import { JSX, createEffect } from "solid-js";
import { Title } from "@solidjs/meta";

export default function StripePage(): JSX.Element {

  createEffect(async () => {

    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    });
  });

  return (
    <>
      <Title>Stripe Page</Title>
      <div class="container">
        <h1>Stripe Test Page</h1>
      </div>
    </>
  );
}

Here are the issues.

  1. When I visit "StripePage" I get the following error:

POST http://localhost:3000/api/create-payment-intent 404 (Cannot find any path matching /api/create-payment-intent.).

This is odd because that route does exist.

  1. Even though I'm getting a 404 error, I'm still getting a console.log() output. How is that possible if the route cannot be found?

  2. If I was using Express, request.body would give me access to the items I passed in the body. But when I console.log(request.body) I get the following:

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

That output is not the JSON I passed in the body.

So what am I doing wrong? Any help would be greatly appreciated.

#

API Routes Not Found. Can You Help?

orchid creek
#
  1. You have to return something from your route, else the route "does not exist", as it has no content.
  2. The API call arrives at the server and the function gets called. It is found on the server, but does not exist for the client as it has no content or different status code
  3. request.body is a ReadableStream, but since you are using JSON, you can simply call await request.json() and you will get the data

I hope that this is helpful, if you have any questions, feel free to ask 🙂

sage lantern
#

@orchid creek Thank you!

I've taken multiple courses on building API servers, and none mentioned that you HAVE to return something from a POST request.

I just tried this out in a Go REST API, two different Node frameworks and I get the same error. So, you live and you learn. I guess that's why they say building things is the best way to learn.

I do have one question.

How did you know that request.body was a ReadableStream and that you had to use request.json()? I didn't see that anywhere in the "API Routes" section of the SolidStart docs.

Is there another set of docs I can reference for this info?

Thanks again!

orchid creek
sage lantern
#

Awesome! Much appreciated. Have a great day.