ClientError: input:9: Field CommentCreateInput.n of required type String! w input:10: Field "name" is not defined by type CommentCreateInput

Question

我正在使用 React、Next.js、GraphCMS 和 TailwindCSS 制作博客网站。我在负责将从网站获取的评论发送到 CMS 的 API 中遇到错误。

这是我的评论表：

    import React, { useState, useEffect, useRef } from "react";

import { submitComment } from "../services";

const CommentsForm = ({ slug }) => {
  const [error, setError] = useState(false);
  const [localStorage, setLocalStorage] = useState(null);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const commentEl = useRef();
  const nameEl = useRef();
  const emailEl = useRef();
  const storeDataEl = useRef();

  useEffect(() => {
    nameEl.current.value = window.localStorage.getItem('name');
    emailEl.current.value = window.localStorage.getItem('email');
    
  }, [])

  const handleCommentSubmission = () => {
    setError(false);

    const { value: comment } = commentEl.current;
    const { value: name } = nameEl.current;
    const { value: email } = emailEl.current;
    const { checked: storeData } = storeDataEl.current;

    if (!comment || !name || !email) {
      setError(true);
      return;
    }

    const commentObj = { name, email, slug, comment };

    if (storeData) {
      window.localStorage.setItem("name", name);
      window.localStorage.setItem("email", email);
    } else {
      window.localStorage.removeItem("name", name);
      window.localStorage.removeItem("email", email);
    }

    submitComment(commentObj)
      .then((res) => {
        setShowSuccessMessage(true);
        setTimeout(() => {
          setShowSuccessMessage(false);
        }, 3000);
      })
  };

  return (
    <div className="bg-gradient-to-r from-gray-300 via-gray-400 to-gray-500 shadow-lg rounded-lg pb-8 mb-8">
      <h3 className="text-xl rounded-lg p-8 mb-8 border-b pb-4">
        Leave a Reply 
      </h3>
      <div className="grid grid-cols-1 gap-4 mb-4 px-5 opacity-60 backdrop-blur-md backdrop-opacity-20">
        <textarea
          ref={commentEl}
          className="p-4 outline-none w-full rounded-lg shadow-md transition-all focus:ring-2 focus:ring-gray-200 bg-gray-300  text-gray-900"
          placeholder="Comment"
          name="comment"
        />
      </div>
      <div className="grid grid-cols-1 gap-4 mb-4 px-5 opacity-60 backdrop-blur-md backdrop-opacity-20 lg:grid-cols-2">
        <input
          type="text"
          ref={nameEl}
          className="py-4 px-4 outline-none w-full rounded-lg shadow-md transition-all focus:ring-2 focus:ring-gray-200 bg-gray-300  text-gray-900"
          placeholder="Name"
          name="name"
        />
        <input
          type="text"
          ref={emailEl}
          className="py-4 px-4 outline-none w-full rounded-lg shadow-md transition-all focus:ring-2 focus:ring-gray-200 bg-gray-300  text-gray-900"
          placeholder="E-mail"
          name="email"
        />
      </div>
      <div className="items-center grid grid-cols-1 gap-4 mb-4 px-5 opacity-60 backdrop-blur-md backdrop-opacity-20">
        <div>
          <input
            ref={storeDataEl}
            type="checkbox"
            id="storeData"
            name="storeData"
            value="true"
          />
          <label
            className="text-md text-gray-900 ml-2 cursor-pointer hover:text-pink-600 transition-all"
            htmlFor="storeData"
          >
            Save my e-mail and name for the next time I comment.
          </label>
        </div>
      </div>

      {error && (
        <p className="mx-5 text-xs text-red-500">All fields are required.</p>
      )}
      <div className="mt-8">
        <button
          type="button"
          onClick={handleCommentSubmission}
          className=" text-white text-md bg-purple-500 mx-4 px-4 py-3 rounded-full shadow-lg hover:-translate-y-1 hover:text-gray-100 hover:shadow-inner hover:bg-purple-600 transition-all"
        >
          Post Comment
        </button>
        {showSuccessMessage && <span className="text-green-600 font-semibold">Comment submitted for review</span>}
      </div>
    </div>
  );
};

export default CommentsForm;

错误如下： ClientError: input:9: 所需字符串类型的字段 CommentCreateInput.n！ w input:10: 字段“name”不是由 CommentCreateInput 类型定义的。 : {"response":{"errors":[{"message":"input:9: 字段CommentCreateInput.n 未按 CommentCreateInput 类型定义。\n"}],"data":null,"extensions":{"reqst":{"query":"\n mutation CreateComment(\n $name: String!\n $en createComment (\n 数据: {\n 名称: $name\n em slug: $slug } }\n }\n ) {\n id\n }\n }\n ","vawind","评论":"很棒 work\n"}}}

评论API

    /**************************************************************************
 * Any fil inside th folder pages/api is mapped to /api/* and
 * will be treated as an API endpoint instead of a page
 *************************************************************************/

import { GraphQLClient, gql } from "graphql-request";

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export default async function comments(req, res) {
  const { name, email, slug, comment } = req.body;

  const graphQLClient = new GraphQLClient(graphqlAPI, {
    headers: {
      authorization: `Bearer ${process.env.GRAPHCMS_TOKEN}`,
    },
  });

  const query = gql`
    mutation CreateComment(
      $name: String!
      $email: String!
      $comment: String!
      $slug: String!
    ) {
      createComment(
        data: {
          name: $name
          email: $email
          comment: $comment
          post: { connect: { slug: $slug } }
        }
      ) {
        id
      }
    }
  `;
  try {
    const result = await graphQLClient.request(query, req.body);
    return res.status(200).send(result);
  } catch (error) {
    console.log(error);
    return res.status(500).send(error);
  }
}

请帮我解决这个问题！

Answer 1

错误可能在这里：

else {
  window.localStorage.removeItem("name", name);
  window.localStorage.removeItem("email", email);
}

将其替换为：

else {
  window.localStorage.removeItem("name");
  window.localStorage.removeItem("email");
}

然后重试。它现在应该可以工作了。