اذهب إلى المحتوى
  • 0

ما هي طريقة استعلام العناصر المتداخلة في GraphQL

Abdelrahman Mostafa10

السؤال

استخدم Strapi CMS وأرغب في الحصول على جميع البيانات لقائمتي، ويتوفر في المستند الرسمي مثال على طلب REST للقيام بذلك:

await fetch( '/api/menus/3?nested&populate=*' ); 

الرد:

{
  "data": {
    "id": 3,
    "attributes": {
      "title": "Main Menu",
      "items": {
        "data": [
          {
            "id": 10,
            "attributes": {
              "title": "Parent Page",
              "url": "/parent-page",
              "target": null,
              "children": [
                {
                  "id": 11,
                  "attributes": {
                    "title": "Child Page",
                    "url": "/child-page",
                    "target": null,
                    "children": [
                      {
                        "id": 12,
                        "attributes": {
                          "title": "Grandchild Page",
                          "url": "/grandchild-page",
                          "target": null,
                          "children": []
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  },
}

أرغب في استعلام نفس البيانات باستخدام GraphQL ولكن ليس لدي أي فكرة حول كيفية القيام بذلك.

حاولت تمرير مرشحات وترقيم الصفحات وما إلى ذلك إلى العناصر، ولكني لم أجد أي شيء حول القدرة على تحديد 'nested'.

query GetMenu {
  menusMenu(id: 1){
    data {
      id
      attributes {
        title
        slug
        items {
          data {
            attributes {
              title
              url
              target
              element_type
              is_disabled

              // throw an error Cannot query field "children" on type "MenusMenuItem".
              children {
                id
              }
            }
          }
        }
      }
    }
  }
}

في الإخراج، أرغب في الحصول على استجابة بنفس الهيكل المتكرر كما هو الحال في مثال REST.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحبا
ممكن تحول  response الذي يرجع من api الي object
باستخدام هذه الدالة
 

async function fetchData() {
  try {
    const response = await fetch('/api/menus/3?nested&populate=*');
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Result as an object:', data);
    
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

وبعد ذاللك استدعاء الدالة
 

const resultObject = await fetchData();

وبعد ذاللك تستطيع استخدامها
مثل هذا
 

const menuId = resultObject.data.id;
const menuTitle = resultObject.data.attributes.title;

console.log(`Menu ID: ${menuId}`);
console.log(`Menu Title: ${menuTitle}`);

const itemsData = resultObject.data.attributes.items.data;

itemsData.forEach(item => {
  const itemId = item.id;
  const itemTitle = item.attributes.title;
  const itemUrl = item.attributes.url;

  console.log(`Item ID: ${itemId}`);
  console.log(`Item Title: ${itemTitle}`);
  console.log(`Item URL: ${itemUrl}`);

  if (item.attributes.children && item.attributes.children.length > 0) {
    item.attributes.children.forEach(child => {
      const childId = child.id;
      const childTitle = child.attributes.title;
      const childUrl = child.attributes.url;

      console.log(`Child ID: ${childId}`);
      console.log(`Child Title: ${childTitle}`);
      console.log(`Child URL: ${childUrl}`);
      if (child.attributes.children && child.attributes.children.length > 0) {
        child.attributes.children.forEach(grandchild => {
          const grandchildId = grandchild.id;
          const grandchildTitle = grandchild.attributes.title;
          const grandchildUrl = grandchild.attributes.url;

          console.log(`Grandchild ID: ${grandchildId}`);
          console.log(`Grandchild Title: ${grandchildTitle}`);
          console.log(`Grandchild URL: ${grandchildUrl}`);
        });
      }
    });
  }
});

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...