solidjs createResource doesn't show error when there was an error i.e 401 Invalid credentials

import { createForm, SubmitHandler, zodForm } from '@modular-forms/solid'
import { A } from '@solidjs/router'
import { createEffect, createResource, createSignal, Show } from 'solid-js'
import { z } from 'zod'

import MyTitle from '../components/MyTitle'
import { useAuth } from '../context/Auth'
import { BACKEND_URL } from '../utils'

const loginSchema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'Enter a valid password')
})

export type LoginFormType = z.infer<typeof loginSchema>

const loginUser = async (values: LoginFormType) => {
  const response = await fetch(`${BACKEND_URL}/login-admin/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values, null, 4)
  })
  return response.json()
}

const Login = () => {
  const { login } = useAuth()

  const [loginValues, setLoginValues] = createSignal<LoginFormType | null>(null)

  const [data] = createResource(loginValues, loginUser)

  const [loginForm, { Form, Field }] = createForm<LoginFormType>({
    validate: zodForm(loginSchema),
    validateOn: 'touched',
    initialValues: {
      email: '',
      password: ''
    }
  })

  const handleSubmit: SubmitHandler<LoginFormType> = async values => {
    setLoginValues(values)
  }

  createEffect(() => {
    console.log(data(), 'data')
    console.log(data.error ? '1' : '2')
  })
  return (
    <>
      <MyTitle title='Login' />
      <div>
        <Form onSubmit={handleSubmit}>
          ..................
        </Form>
        <div>
          <A href='/forget-password'>Forget password?</A>
        </div>
      </div>
    </>
  )
}

export default Login

import { createForm, SubmitHandler, zodForm } from '@modular-forms/solid'
import { A } from '@solidjs/router'
import { createEffect, createResource, createSignal, Show } from 'solid-js'
import { z } from 'zod'

import MyTitle from '../components/MyTitle'
import { useAuth } from '../context/Auth'
import { BACKEND_URL } from '../utils'

const loginSchema = z.object({
  email: z.string().email('Enter a valid email'),
  password: z.string().min(8, 'Enter a valid password')
})

export type LoginFormType = z.infer<typeof loginSchema>

const loginUser = async (values: LoginFormType) => {
  const response = await fetch(`${BACKEND_URL}/login-admin/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values, null, 4)
  })
  return response.json()
}

const Login = () => {
  const { login } = useAuth()

  const [loginValues, setLoginValues] = createSignal<LoginFormType | null>(null)

  const [data] = createResource(loginValues, loginUser)

  const [loginForm, { Form, Field }] = createForm<LoginFormType>({
    validate: zodForm(loginSchema),
    validateOn: 'touched',
    initialValues: {
      email: '',
      password: ''
    }
  })

  const handleSubmit: SubmitHandler<LoginFormType> = async values => {
    setLoginValues(values)
  }

  createEffect(() => {
    console.log(data(), 'data')
    console.log(data.error ? '1' : '2')
  })
  return (
    <>
      <MyTitle title='Login' />
      <div>
        <Form onSubmit={handleSubmit}>
          ..................
        </Form>
        <div>
          <A href='/forget-password'>Forget password?</A>
        </div>
      </div>
    </>
  )
}

export default Login

import { createSignal, createResource } from "solid-js";
import { render } from "solid-js/web";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/peopl/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <span>{user.error && "Error"}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

render(App, document.getElementById("app"));

import { createSignal, createResource } from "solid-js";
import { render } from "solid-js/web";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/peopl/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <span>{user.error && "Error"}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

render(App, document.getElementById("app"));