App reviews, troubleshooting, and recommendations
Hi,
I am using useForm to validate my form, as shown in the examples on @Shopify/react-form. Everything works fine on the frontend, but I want to validate the data on the backend as well. However, since I am new to frontend solutions, I am having trouble understanding how to handle the onSubmit function.
According to the documentation, onSubmit should be async and return either a success or fail status, along with any error messages. However, I am having trouble getting the error messages to show up.
After doing some research, I found a solution that works for me:
I would like to explore other solutions to learn more about how this should work.
const onSubmit = useCallback(async (formData) => {
const endpoint = "/api/item";
try {
const response = await fetch(endpoint, {
method: 'POST',
body: JSON.stringify(formData),
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
if (response.status === 400) {
const data = await response.json();
console.log(data);
title.setError('error');
throw new Error('400 error')
}
throw new Error('some error')
}
return {status: 'success'};
} catch (error) {
return {status: 'fail', error: [error]};
}
}, [item, setItem]);
t the moment, I have found this solution, but I am not sure if it is correct. Additionally, the reset form functionality does not seem to be working, and I am unsure why. Do you have any ideas on how to fix this issue?
const onSubmit = useCallback(async (formData) => {
const endpoint = "/api/item";
try {
const response = await fetch(endpoint, {
method: 'POST',
body: JSON.stringify(formData),
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
if (!response.ok) {
if (response.status === 400) {
title.setError('error'); // error for title field
throw new Error('400 error')
}
throw new Error('some error')
}
reset();
makeClean();
setToast({error: false, content: 'Item has been created.'});
return {status: 'success'};
} catch (error) {
setToast({error: true, content: error.message});
return {status: 'fail', errors: [{message: error.message}]};
}
}, [item, setItem]);
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025