Почему я не могу обновить данные формы? ⇐ Javascript

[Anonymous]

Я хочу создать форму, которая создает карту, которую я могу редактировать. Всякий раз, когда я пытаюсь нажать кнопку «Редактировать», чтобы обновить карту, сделанная информация не переносится на новый экран. Когда я все равно пытаюсь отредактировать его, я получаю 400 сообщений, в котором говорится: «Не удалось загрузить ресурс: сервер ответил статусом 400 (плохой запрос)». Когда я пытаюсь изменить ID на ExperienceID в переменной страницы опыта в разделе «Использование», я получаю больше сообщений об ошибках. Я проверил и дважды проверил свои мутации, резолюры, типы и т. Д., Но я все еще не могу заставить это работать. Я также попытался использовать ИИ для решения проблемы, и это предложило мне изменить все свои даты с строк на целые числа, но это не помогло с моей «Обновление формы».import { useMutation, useQuery } from "@apollo/client";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { GET_EXPERIENCE } from "../graphql/queries/experience.query.js";
import { UPDATE_EXPERIENCE } from "../graphql/mutations/experience.mutations.js";
import toast from "react-hot-toast";

const ExperiencePage = () => {
const { id } = useParams();
const { loading, data} = useQuery(GET_EXPERIENCE, {
variables: { id: id },
});

console.log("UseQuery:", data)

const [updateExperience] = useMutation(UPDATE_EXPERIENCE);

const [formData, setFormData] = useState({
description: data?.experience?.description || "",
title: data?.experience?.title || "",
type: data?.experience?.type || "",
startDate: data?.experience?.startDate || "",
endDate: data?.experience?.endDate || "",
});

const handleSubmit = async (e) => {
e.preventDefault();
try {
await updateExperience({
variables: {
input: {
...formData,
experienceID: id,
startDate: formData.startDate ? new Date(formData.startDate).getTime() : null,
endDate: formData.endDate ? new Date(formData.endDate).getTime() : null,
},
},
});
toast.success("Experience updated successfully");
} catch (error) {
toast.error(error.message || "Update failed");
}
};

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prevFormData) => ({
...prevFormData,
[name]: value,
}));

console.log(formData)
};

useEffect(() => {
if (data && data.experience) {
setFormData({
description: data.experience.description || "",
title: data.experience.title || "",
type: data.experience.type || "",
startDate: data.experience.startDate
? new Date(Number(data.experience.startDate)).toISOString().slice(0, 10)
: "",
endDate: data.experience.endDate
? new Date(Number(data.experience.endDate)).toISOString().slice(0, 10)
: "",
});
}
}, [data]);

if (loading) return
Loading...

return (

{/* */}



Update Experience Form




Title









Description





Type



Type
Education
Employment
Internship
Volunteer





Start Date



End Date




Update Experience


Cancel







);
};

export default ExperiencePage;
< /code>
Запрос, мутация, разрешение, typedef < /p>
Query:

export const GET_EXPERIENCE = gql`
query GetExperience($id: ID!) {
experience(experienceID: $id) {
_id
title
type
description
startDate
endDate
}
user {
email
}
}

`;

Mutation:
export const UPDATE_EXPERIENCE = gql`
mutation UpdateExperience($input: UpdateExperienceInput!) {
updateExperience(input: $input) {
experienceID
title
type
description
startDate
endDate
}
}
`;

Resolvers:

updateExperience: async (_, { input }) => {
try {
const updatedExperience = await Experience.findByIdAndUpdate(input.experienceID, input, {
new: true,
});
return updatedExperience;
} catch (err) {
console.error("Error updating Experience:", err);
throw new Error("Error updating Experience");
}
},

TypeDef:

type Experience {
_id: ID!
userId: ID!
description: String!,
title: String!,
type: String,

startDate: Date,
endDate: Float,
}

type Query {
experiences: [Experience!]
experience(experienceID: ID!): Experience
}

type Mutation {
addExperience(input: AddExperienceInput!): Experience!
updateExperience(input: UpdateExperienceInput!): Experience!
deleteExperience(experienceID: ID!): Experience!
}

input AddExperienceInput {
description: String!,
title: String!,
type: String,
startDate: Date,
endDate: Date,
}

input UpdateExperienceInput {
experienceID: ID!
description: String,
title: String,
type: String,
startDate: Date,
endDate: Date,
}
`


Подробнее здесь: https://stackoverflow.com/questions/797 ... -form-data