How to handle zodErrors?
Anyone here using zod and react query? How are you handling zod errors? I assume with a try/catch but where in the code should it be handled?
import z from "zod";
export const userSchema = z.array(
z.object({
id: z.number(),
name: z.number(),
})
);
export const useFetchUsers = () => {
return useQuery([users.fetchUsers], async () => {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
return userSchema.parse(response.data);
});
};
export const App = () => {
const { data: usersData } = useFetchUsers();
return (
<>
{usersData?.map((user) => (
<ul>
<li key={user.id}>{user.name}</li>
</ul>
))}
</>
);
};
ZodError: [
{
"code": "invalid_type",
"expected": "number",
"received": "string",
"path": [
0,
"name"
],
"message": "Expected number, received string"
},import z from "zod";
export const userSchema = z.array(
z.object({
id: z.number(),
name: z.number(),
})
);
export const useFetchUsers = () => {
return useQuery([users.fetchUsers], async () => {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
return userSchema.parse(response.data);
});
};
export const App = () => {
const { data: usersData } = useFetchUsers();
return (
<>
{usersData?.map((user) => (
<ul>
<li key={user.id}>{user.name}</li>
</ul>
))}
</>
);
};
ZodError: [
{
"code": "invalid_type",
"expected": "number",
"received": "string",
"path": [
0,
"name"
],
"message": "Expected number, received string"
},
