I created this api usrion RTK Query
`import { createApi, fetchBaseQuery } from “@reduxjs/toolkit/query/react”;
export const usersApi = createApi({
reducerPath: “users”,
tagTypes: [“Users”],
baseQuery: fetchBaseQuery({
baseUrl: “/api/users”,
prepareHeaders: (headers) => {
const accessToken = sessionStorage.getItem(“nh_accessToken”);
if (accessToken) {
headers.set(“authorization”, Bearer ${accessToken});
headers.set(“Content-Type”, “application/json”);
}
return headers;
},
}),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => "/mg",
}),
registerUser: builder.mutation({
query: (body) => ({
url: "/register",
method: "POST",
body
}),
invalidatesTags: ["Users"]
}),
}),
});
export const { useGetUsersQuery, useRegisterUserMutation } = usersApi;
`
The getUsers endpoint works just fine, but the registerUser endpoint is always returning an error 500
This is the component where I call the endpoint
import { Link as RouterLink } from "react-router-dom";
import { Button, Form, Input, Typography } from "antd";
import { LockOutlined, MailOutlined, UserOutlined, PhoneOutlined, HomeOutlined } from "@ant-design/icons";
import { getStyles } from "../utils/getStyles";
import { AuthLayout } from "../layouts/AuthLayout";
import { useForm } from "../../hooks";
import { useRegisterUserMutation } from "../../app/apis/users/usersApi";
const { Text, Link } = Typography;
export const RegisterPage = () => {
const [registerUser, response] = useRegisterUserMutation();
const { email, password, firstName, lastName, phone, residentialUnit, propertyId, onInputChange } = useForm({
firstName: "",
lastName: "",
phone: "",
email: "",
residentialUnit: "",
propertyId: "",
password: "",
});
const onSubmit = async (e) => {
e.preventDefault();
const firstWordFromName = firstName.split(" ")[0];
const firstWordFromLastName = lastName.split(" ")[0];
const userData = {
firebaseUser: {
displayName: firstWordFromName + " " + firstWordFromLastName,
email: email,
phoneNumber: phone,
password: password,
},
mongoUser: {
firstName: firstName,
lastName: lastName,
email: email,
phone: phone,
residentialUnit: residentialUnit,
propertyId: propertyId,
},
};
console.log('userData',userData)
await registerUser(userData)
.unwrap()
.then(() => {
console.log('No hay error')
})
.then((error) => {
console.error(error)
})
}
const styles = getStyles();
const onFinish = (values) => {
console.log("Received values of form: ", values);
};
return (
<>
<AuthLayout
title="New User"
>
<Form
onSubmitCapture={onSubmit}
onChange={onInputChange}
onFinish={onFinish}
layout="vertical"
requiredMark="optional"
className="animate__animated animate__fadeIn"
>
<Form.Item
name="firstName"
rules={[
{
required: true,
},
]}
>
<Input prefix={<UserOutlined />} value={firstName}/>
</Form.Item>
<Form.Item
name="lastName"
rules={[
{
required: true,
},
]}
>
<Input prefix={<UserOutlined />} value={lastName} />
</Form.Item>
<Form.Item
name="phone"
rules={[
{
required: true,
},
]}
>
<Input prefix={<PhoneOutlined />} value={phone} />
</Form.Item>
<Form.Item
name="email"
rules={[
{
type: "email",
required: true,
},
]}
>
<Input prefix={<MailOutlined />} value={email}/>
</Form.Item>
<Form.Item
name="residentialUnit"
rules={[
{
required: true,
},
]}
>
<Input prefix={<HomeOutlined />} value={residentialUnit}/>
</Form.Item>
<Form.Item
name="propertyId"
rules={[
{
required: true,
},
]}
>
<Input prefix={<HomeOutlined />} value={propertyId}/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
},
]}
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
value={password}
/>
</Form.Item>
<Form.Item style={{ marginBottom: "0px" }}>
<Button block type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
</Form>
</AuthLayout>
</>
);
};
This is what I see in console
console log
And the request payload is not empty
payload
I try this locally with postman ant it works perfectly, but for some reason from react is not working.
I don’t know what else to look here, please help
The call to the registerUser endpoint should work
