SolidJS•2w ago

Solid start call

Just getting into solid start. Going through this documentation to try and get api routes set up so I can fetch data: https://docs.solidjs.com/solid-start/building-your-application/api-routes I have two files that look like this

// src/routes/index.tsx
import { createAsync, query } from "@solidjs/router";
import { For } from "solid-js";

const getPosts = query(async () => {
  const posts = await fetch("http://localhost:3001/api/hello");
  return await posts.json();
}, "posts");

export default function Home() {
  const posts = createAsync(() => getPosts());

  return (
    <section>
      <ul>
        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
      </ul>
    </section>
  );
}

// src/routes/index.tsx
import { createAsync, query } from "@solidjs/router";
import { For } from "solid-js";

const getPosts = query(async () => {
  const posts = await fetch("http://localhost:3001/api/hello");
  return await posts.json();
}, "posts");

export default function Home() {
  const posts = createAsync(() => getPosts());

  return (
    <section>
      <ul>
        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
      </ul>
    </section>
  );
}

// src/routes/api/hello.ts
import { APIEvent, json } from "solid-start";

export async function GET() {
  console.log("testing")
  return json({ message: "Hello from the backend!" });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  return new Response(JSON.stringify({ echo: body }), {
    headers: { "Content-Type": "application/json" }
  });
}

// src/routes/api/hello.ts
import { APIEvent, json } from "solid-start";

export async function GET() {
  console.log("testing")
  return json({ message: "Hello from the backend!" });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  return new Response(JSON.stringify({ echo: body }), {
    headers: { "Content-Type": "application/json" }
  });
}

I can't seem to get it to call the GET (or POST) route. Not sure where I'm going wrong. Thanks for any help!

API routes - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

12 Replies

Madaxen86•2w ago

You don’t need an explicit api route. You can add "use server" at the top inside the async function and call that directly. Like here: https://docs.solidjs.com/solid-start/guides/data-fetching#passing-parameters-to-queries

Data fetching - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

Madaxen86•2w ago

But actually what you did should work nonetheless. Did you ensure that the app runs in port 3001 all the time?

𝐗-𝐥𝐞𝐦OP•2w ago

Did you ensure that the app runs in port 3001 all the time?

I believe so? Me setup was pnpm create solid@latest (enabled solid start) and I ran pnpm i and pnpm dev. I specifically set the port to 3001. Do I need to start the api seperatly?

peerreynders•2w ago

Just to get you started again:

// src/routes/index.tsx
import { createAsync, query } from '@solidjs/router';
import { Show } from 'solid-js';

const BASE_HREF = 'http://localhost:3000';
const HELLO_HREF = `${BASE_HREF}/api/hello`;

const getPosts = query(async (): Promise<{ message: string }> => {
  const posts = await fetch(HELLO_HREF);
  return posts.json();
}, 'posts');

export default function Home() {
  const posts = createAsync(() => getPosts(), { deferStream: true });

  return (
    <section>
      <ul>
        <Show when={posts()} fallback={<li>loading</li>}>
          {(data) => <li>{data().message}</li>}
        </Show>
      </ul>
    </section>
  );
}

// src/routes/index.tsx
import { createAsync, query } from '@solidjs/router';
import { Show } from 'solid-js';

const BASE_HREF = 'http://localhost:3000';
const HELLO_HREF = `${BASE_HREF}/api/hello`;

const getPosts = query(async (): Promise<{ message: string }> => {
  const posts = await fetch(HELLO_HREF);
  return posts.json();
}, 'posts');

export default function Home() {
  const posts = createAsync(() => getPosts(), { deferStream: true });

  return (
    <section>
      <ul>
        <Show when={posts()} fallback={<li>loading</li>}>
          {(data) => <li>{data().message}</li>}
        </Show>
      </ul>
    </section>
  );
}

// src/routes/api/hello.ts
import { APIEvent } from '@solidjs/start/server';
import { json } from '@solidjs/router';

export async function GET() {
  console.log('testing');
  return json({ message: 'Hello from the backend!' });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  return new Response(JSON.stringify({ echo: body }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

// src/routes/api/hello.ts
import { APIEvent } from '@solidjs/start/server';
import { json } from '@solidjs/router';

export async function GET() {
  console.log('testing');
  return json({ message: 'Hello from the backend!' });
}

export async function POST({ request }: APIEvent) {
  const body = await request.json();
  return new Response(JSON.stringify({ echo: body }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

There were lots of little problems. Why are you using port 3001 for the API—is something else hogging the default port of 3000?

𝐗-𝐥𝐞𝐦OP•2w ago

Why are you using port 3001 for the API—is something else hogging the default port of 3000?

I always run my main project on port 3000. So when I'm trying out new stuff/mini projects (like this one) I use port 3001. I'll try what you sent, thank you. You sent the same code snippet twice. Was that intentional?

peerreynders•2w ago

fixed

𝐗-𝐥𝐞𝐦OP•2w ago

Much thanks

peerreynders•2w ago

Using

  "scripts": {
    "dev": "PORT=3001 vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
    "version": "vinxi version"
  },

  "scripts": {
    "dev": "PORT=3001 vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
    "version": "vinxi version"
  },

and after updating src/routes/index.tsx it still works.

𝐗-𝐥𝐞𝐦OP•2w ago

That works, thank you so much!

peerreynders•2w ago

Note how this accomplishes the same thing:

// src/routes/index.tsx
import { createAsync, query } from '@solidjs/router';
import { Show } from 'solid-js';

const getPosts = query(async () => {
  'use server';
  console.log('testing');
  return { message: 'Hello from the backend!' };
}, 'posts');

export default function Home() {
  const posts = createAsync(() => getPosts(), { deferStream: true });

  return (
    <section>
      <ul>
        <Show when={posts()} fallback={<li>loading</li>}>
          {(data) => <li>{data().message}</li>}
        </Show>
      </ul>
    </section>
  );
}

// src/routes/index.tsx
import { createAsync, query } from '@solidjs/router';
import { Show } from 'solid-js';

const getPosts = query(async () => {
  'use server';
  console.log('testing');
  return { message: 'Hello from the backend!' };
}, 'posts');

export default function Home() {
  const posts = createAsync(() => getPosts(), { deferStream: true });

  return (
    <section>
      <ul>
        <Show when={posts()} fallback={<li>loading</li>}>
          {(data) => <li>{data().message}</li>}
        </Show>
      </ul>
    </section>
  );
}

without having to implement an API route.

𝐗-𝐥𝐞𝐦OP•2w ago

Thanks, the { message: 'Hello from the backend!' } was mostly to prove that it's working. I have a DB and stuff I am going to be pulling data from (which I believe you can use what you posted if I'm using an orm?)

peerreynders•2w ago

const getPosts = query(async () => {
  'use server';
  return db.getPosts();
}, 'posts');

const getPosts = query(async () => {
  'use server';
  return db.getPosts();
}, 'posts');

will work where db.getPosts() only exists on the server. "use server" essentially creates an RPC call while (de)serialization is handled by seroval.

Gaming

Programming

Solid start call

Did you find this page helpful?