How to return 404 in Qwik onGet?

Question

I'm using Qwik, and I want to return 404 when from my onGet method.

Unfortunately the docs does not include an example regarding this. And I can't find anything through Google search.

Basically I want to do this:

const onGet = async({ params, url }) => {
    // searching the DB or API for the item
    // return the item if it exist,
    // but return 404 it it does not
    // and I don't know how to return 404
}

score 1 · Answer 1 · answered Feb 14 '23 at 05:19

Using qwikcity loader$

import { component$ } from "@builder.io/qwik";
import { loader$ } from "@builder.io/qwik-city";

export const githubLoader = loader$(async ({ fail }) => {
  try {
    const res = await fetch("https://api.github.com/users/harshmangalam");
    if (res.ok) {
      const user = await res.json();
      return user;
    }

    // return error status for 401,403,404 ,500 etc...
    return fail(res.status, {
      message: "Error message",
    });
  } catch (error) {
    return fail(500, {
      message: "error message",
    });
  }
});

export default component$(() => {
  const githubSignal = githubLoader.use();

  return <pre>{JSON.stringify(githubSignal.value, null, 4)}</pre>;
});

Add some non-exists username you will get error message.

score 0 · Answer 2 · answered Feb 02 '23 at 17:20

0

import { component$, Resource } from "@builder.io/qwik";
import {
  type RequestHandler,
  useEndpoint,
  type DocumentHead,
} from "@builder.io/qwik-city";

export const onGet: RequestHandler = async ({ response }) => {
  const res = await fetch("https://api.github.com/users/harshmangalam");
  if (res.ok) {
    const user = await res.json();
    return user;
  }

  // return error status for 401,403,404 ,500 etc...
  throw response.error(res.status);
};

export default component$(() => {
  const resource = useEndpoint<typeof onGet>();

  return (
    <Resource
      value={resource}
      onResolved={(data) => <pre>{JSON.stringify(data, null, 4)}</pre>}
      onRejected={(error) => <pre>{JSON.stringify(error, null, 4)}</pre>}
      onPending={() => <p>Loading...</p>}
    />
  );
});

answered Feb 02 '23 at 17:20

Harsh Mangalam

1,116
1
10
19

Look into this docs https://d41cb71d.qwik-docs.pages.dev/qwikcity/routing/error-responses/ – Harsh Mangalam Feb 02 '23 at 17:24
Also look here https://stackoverflow.com/questions/74001578/how-to-override-the-default-404-screen-in-qwik – Harsh Mangalam Feb 02 '23 at 17:24
I think the `onGet` is not there anymore. I think it's now `loader$`. – behnam rahmani Feb 12 '23 at 13:41
Yes qwik added remix style loader and action for fetching and mutation and it is awesome. – Harsh Mangalam Feb 12 '23 at 18:19
Can you please update your answer for that `loader$`? How can I return custom HTTP codes from them? – behnam rahmani Feb 13 '23 at 07:25
added using `loader$` – Harsh Mangalam Feb 15 '23 at 19:39

How to return 404 in Qwik onGet?

2 Answers2