I have this mutation to create the product review which is working fine but not able to integrate into the form does anyone how I can fix that ?
mutation {
createProductReview(
input: {
sku: "Samsung S21 Ultra",
nickname: "Test",
summary: "Great looking phone",
text: "This phone looks and feels great.",
ratings: [
{
id: "NA==",
value_id: "MTk="
}, {
id: "MQ==",
value_id: "NA=="
}, {
id: "Mg==",
value_id: "OA=="
}
]
}
) {
review {
nickname
summary
text
}
}
}
here is my component code:
import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';
const CREATE_PRODUCT_REVIEW = gql`
mutation CreateProductReview($input: ProductReviewInput!) {
createProductReview(input: $input) {
review {
nickname
summary
text
}
}
}
`;
const ProductReview = ({ productSku }) => {
const [sku, setSku] = useState('');
const [nickname, setNickname] = useState('');
const [summary, setSummary] = useState('');
const [text, setText] = useState('');
const [createProductReview, { data }] = useMutation(CREATE_PRODUCT_REVIEW);
const handleSubmit = async (e) => {
e.preventDefault();
const input = {
sku,
nickname,
summary,
text,
ratings: [
{ id: "NA==", value_id: "MTk=" },
{ id: "MQ==", value_id: "NA==" },
{ id: "Mg==", value_id: "OA==" },
],
};
try {
const result = await createProductReview({ variables: { input } });
console.log('Review created:', result.data.createProductReview.review);
setNickname('');
setSummary('');
setText('');
} catch (error) {
console.error('Error creating review:', error);
}
};
return (
<div>
<h2>Create Product Review</h2>
<form onSubmit={handleSubmit}>
{/* Input fields for sku, nickname, summary, text */}
<input type="hidden" placeholder="SKU" value={productSku} onChange={(e) => setSku(productSku)} />
<input type="text" placeholder="Nickname" value={nickname} onChange={(e) => setNickname(e.target.value)} />
<input type="text" placeholder="Summary" value={summary} onChange={(e) => setSummary(e.target.value)} />
<textarea placeholder="Text" value={text} onChange={(e) => setText(e.target.value)} />
{/* Submit button */}
<button type="submit">Submit Review</button>
</form>
</div>
);
};
export default ProductReview;
And I'm calling this component in another component where I'm adding sku in the props
<ProductReview productSku={productDetails.sku} />
How I can submit the form without error I'm getting this error on submitting the form
index.js:31 POST https://pwa-studio.local:8103/graphql 500 (Internal Server Error)
errorLink.js:18 [Network error]: ServerError: Response not successful: Received status code 500
productReview.js:46 Error creating review: Error: Response not successful: Received status code 500
at new ApolloError (index.js:29:1)
at Object.error (QueryManager.js:137:74)
at notifySubscription (module.js:137:1)
at onNotify (module.js:176:1)
at SubscriptionObserver.error (module.js:229:1)
at Object.eval [as error] (asyncMap.js:32:40)
at notifySubscription (module.js:137:1)
at onNotify (module.js:176:1)
at SubscriptionObserver.error (module.js:229:1)
at eval (iteration.js:4:49)
You're not initializing the
sku
state based on theproductSku
prop. If thesku
field is never updated yoursku
state will be blank.then later your field value needs to be the state and not the prop.