PWA Studio创建商品评论Mutation集成表单报错求助

我有一个用于创建商品评论的createProductReview Mutation，单独运行正常，但集成到React表单后提交时出现500内部服务器错误，请求协助解决。

独立运行正常的Mutation代码 #

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
    }
  }
}

React组件代码 #

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;

组件调用方式 #

<ProductReview productSku={productDetails.sku} />

提交表单时的错误信息 #

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)

排查与解决方案 #

1. 修复SKU值传递问题
   组件中sku状态初始为空，且隐藏输入框的onChange逻辑错误（不会触发状态更新），导致提交时sku可能为空。直接用传入的productSku替代状态：

   // 去掉sku状态，提交时直接使用props值
   const input = {
       sku: productSku,
       nickname,
       summary,
       text,
       ratings: [/* ... */]
   };
   // 同时简化隐藏输入框
   <input type="hidden" value={productSku} />
   

2. 对比请求参数差异
   在handleSubmit中添加console.log(input)，将输出与独立运行的Mutation参数对比，确认所有字段（尤其是sku）的值完全一致，避免productDetails.sku为空或格式错误。

3. 查看服务器详细日志
   500错误是服务器内部问题，需查看后端日志（如Magento PWA的服务器日志），确认具体错误原因——比如SKU不存在、权限不足、字段验证失败等。

4. 验证GraphQL字段匹配
   对照后端GraphQL Schema，确认ProductReviewInput的字段定义与前端传递的参数完全匹配，比如ratings中的字段名是否应为valueId而非value_id。

内容的提问来源于stack exchange，提问作者Ramish Hassan Riaz