ما سبب خطأ GraphQLError: Expected type \"StatusInput\" to be an object

Abdelrahman Mostafa10 · 8 يناير

قمت بإنشاء مشروع في Apollo Sandbox - فيما يلي نسخة من نسخة المشروع من Apollo Sandbox:

{"data": {"createProject": {"_id": "65952c08576a8d317dc4df47", "description": "front end", "name": "new react", status": [{"code": "a", "launch": "c", "content": "b", "planning": "d","qa": "f", "start": "g", "ux": "h" }]}}

قمت بإضافة mutation في جانب العميل كما هو موضح أدناه:

mutation createProject($name: String! $description: String! $status: [StatusInput]!) {    createProject(name: $name, description: $description, status: $status) { _id name description status {start planning ux content code qa launch }}}

والتالي هو كود useQuery لمعالج الإرسال submit handler:

const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    const mutationRes = await createProject({
      variables: {
        name: formState.name,
        description: formState.description,
        status: formState.status,
      },
    });

    console.log(mutationRes);
  } catch (err) {
    console.log(err);
  }
};

أستطيع رؤية الاستجابة في تبويب Network في المتصفح للاسم والوصف والحالة ولكنني أحصل على رمز حالة 400 يشير إلى GraphQLError: Expected type "StatusInput" to be an object.

نوع الإدخال في الخادم:

input StatusInput { start: String! planning: String! ux: String! content: String! code: String! qa: String! launch: String! project: ID! }

والـ Mutation:

createProject( name: String! description: String! status: [StatusInput]! ): Project

فما المشكلة؟

تم التعديل في 8 يناير بواسطة Abdelrahman Mostafa10

Kamel Mecheri · 19 يوليو

في حالتك، يظهر أن هناك مشكلة في تطابق نوع الإدخال (Input Type) بين ما ترسله من جهة العميل (client) وما يتوقعه الخادم (server) في StatusInput. دعنا نحلل المشكلة خطوة بخطوة.

المشكلة:

تلقيت رمز حالة 400 مع خطأ يشير إلى أن StatusInput يجب أن يكون كائنًا (object)، ولكن يبدو أنك ترسل مصفوفة (array) من الكائنات.

السبب:

من تعريف نوع الإدخال في الخادم، يتضح أن StatusInput يحتاج إلى خصائص معينة مثل start, planning, ux, إلخ، وأيضًا يجب أن يكون لكل حالة project معرف مشروع (project: ID!).

الحل:

تأكد من شكل البيانات: يجب أن يكون شكل البيانات المرسلة في الاستعلام مطابقًا لما يتوقعه الخادم. بناءً على تعريف نوع الإدخال في الخادم، يجب أن تكون الحالة (status) عبارة عن كائن واحد يتبع بنية StatusInput.

تحديث البيانات المرسلة: بدلاً من إرسال مصفوفة من الكائنات، أرسل كائنًا واحدًا من نوع StatusInput.

الكود المعدل:

تأكد من أن formState.status هو كائن واحد، وليس مصفوفة. على سبيل المثال:

const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    const mutationRes = await createProject({
      variables: {
        name: formState.name,
        description: formState.description,
        status: {
          start: formState.status.start,
          planning: formState.status.planning,
          ux: formState.status.ux,
          content: formState.status.content,
          code: formState.status.code,
          qa: formState.status.qa,
          launch: formState.status.launch,
          project: formState.status.projectId // تأكد من إرسال معرف المشروع إذا كان مطلوباً
        },
      },
    });

    console.log(mutationRes);
  } catch (err) {
    console.log(err);
  }
};

التعديلات الأخرى:

تحديث الاستعلام: إذا كانت البيانات المرسلة عبارة عن كائن واحد، فتأكد من تحديث الاستعلام في mutation ليتناسب مع هذا التغيير.

تأكد أيضًا من التحقق من StatusInput في الخادم وتطابقه مع ما ترسله من جهة العميل. إذا كان هناك تغيير في هيكل البيانات، تأكد من تحديث كل من العميل والخادم لينسجموا معًا.

بهذا التحديث، يجب أن يكون لديك تواصل سلس بين العميل والخادم ويتوافق مع متطلبات GraphQL.

ما سبب خطأ GraphQLError: Expected type \"StatusInput\" to be an object

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

Kamel Mecheri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية