SolidJS•11mo ago

API Routes Not Found. Can You Help?

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);

}

"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>
    </>
  );
}

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. 2. 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? 3. 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.

5 Replies

apollo79•11mo ago

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 🙂

ChrisThornhamOP•11mo ago

@apollo79 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!

apollo79•11mo ago

solid-start provides you a web request object, so you can just refer to mdn: https://developer.mozilla.org/en-US/docs/Web/API/Request

MDN Web Docs

Request - Web APIs | MDN

The Request interface of the Fetch API represents a resource request.

ChrisThornhamOP•11mo ago

Awesome! Much appreciated. Have a great day.

apollo79•11mo ago

Happy to help 🙂 You too!

Gaming

Programming

API Routes Not Found. Can You Help?