👨🏿 ✌🏿 ↔️ DevExtreme- प्रतिक्रियाशील से CustomTreeData घटक के लिए GraphQL डेटा रूपांतरण 💥 👨‍💻 😯

पेड़ के रूप में डेटा को प्रदर्शित करने, विभिन्न क्षेत्रों को संपादित करने, पंक्तियों को हटाने / जोड़ने आदि की क्षमता के लिए यह यहाँ लिया गया। उपयुक्त घटकों की खोज की प्रक्रिया में (मैं सामग्री-यूआई और प्रतिक्रिया के तहत खोजना चाहता था) मैंने डेवेक्स्ट्रीम-रिएक्टिव की कोशिश करना शुरू कर दिया। हालांकि, न्यून्स ने पाया कि डेवेक्स्ट्रीम-रिएक्टिव, ट्री के लिए डेटा को ऑब्जेक्ट्स के एक फ्लैट ऐरे के रूप में चाहता है, जिनमें से प्रत्येक में "पैरेंट" का पेरेंट_ड होता है। एक GraphQL सर्वर मुझे ऑब्जेक्ट्स के सरणियों के साथ नेस्टेड ऑब्जेक्ट के रूप में एक पेड़ देता है। मुझे दूसरे को एक करना था - शायद कोई काम आएगा। या शायद कोई कहेगा कि मैं मामले को लेकर भ्रमित नहीं था, और यह सब बहुत आसान है।

इसलिए, ग्राफक्यूएल क्वेरी के जवाब में (परीक्षण हैं, प्रत्येक में प्रश्न हैं, प्रत्येक सर्वेक्षण के लिए कई उत्तर विकल्प हैं और हम एक ही बार में सब कुछ प्राप्त करना चाहते हैं):

query TestQuery { tests { id title questions { id title answers { id title } } } }

हमें फॉर्म के सर्वर से प्रतिक्रिया मिलती है:

स्पायलर हेडिंग

 { "data": { "tests": [ { "id": "test_1", "title": "Test 1", "questions": [ { "id": "question_1", "title": "Question 1 (for t1)", "answers": [ { "id": "answer_1", "title": "Answer 1 (for q1)" }, { "id": "answer_2", "title": "Answer 2 (for q1)" } ] }, { "id": "question_2", "title": "Question 2 (for t1)", "answers": [ { "id": "answer_1_2", "title": "Answer 1 (for q2)" } ] } ] }, { "id": "test_2", "title": "Test 2", "questions": [ { "id": "question_1_2", "title": "Question 1 (for t2)", "answers": [] } ] }, { "id": "test_3", "title": "Test 3", "questions": [] } ] } }

सामान्य करने के लिए, normalizr का उपयोग करें:

योजना के विवरण में, प्रक्रियाप्रक्रिया के माध्यम से, हम माता-पिता के लिंक वाले बच्चों के लिए पिड गुण जोड़ते हैं। वैसे, सामान्य नॉर्मिज़्र में सर्किट का वर्णन करने का तरीका बदल गया है, जिसके कारण असाइनमेंट, अर्रेऑफ, डिफाइन (जो कई हैं) के साथ उदाहरण लगभग अप्रासंगिक हैं।

 const answerSchema = new schema.Entity('answers',{}, { processStrategy: (entity, parent, key) => { return { ...entity, pid: parent.id} } } ) const questionSchema = new schema.Entity('questions',{ answers:[answerSchema]}, { processStrategy: (entity, parent, key) => { return { ...entity, pid: parent.id} } }, ) const testSchema = new schema.Entity('tests',{questions:[questionSchema]}, { processStrategy: (entity, parent, key) => { return { ...entity, pid: 0 } } } ) const nRes = normalize(result.data, {tests: [testSchema]})

हमें यह मिलता है:

स्पायलर हेडिंग

 { "entities": { "answers": { "answer_1": { "id": "answer_1", "title": "Answer 1 (for q1)", "__typename": "Answer", "pid": "question_1" }, "answer_2": { "id": "answer_2", "title": "Answer 2 (for q1)", "__typename": "Answer", "pid": "question_1" }, "answer_1_2": { "id": "answer_1_2", "title": "Answer 1 (for q2)", "__typename": "Answer", "pid": "question_2" } }, "questions": { "question_1": { "id": "question_1", "title": "Question 1 (for t1)", "answers": [ "answer_1", "answer_2" ], "__typename": "Question", "pid": "test_1" }, "question_2": { "id": "question_2", "title": "Question 2 (for t1)", "answers": [ "answer_1_2" ], "__typename": "Question", "pid": "test_1" }, "question_1_2": { "id": "question_1_2", "title": "Question 1 (for t2)", "answers": [ ], "__typename": "Question", "pid": "test_2" } }, "tests": { "test_1": { "id": "test_1", "title": "Test 1", "questions": [ "question_1", "question_2" ], "__typename": "Test", "pid": 0 }, "test_2": { "id": "test_2", "title": "Test 2", "questions": [ "question_1_2" ], "__typename": "Test", "pid": 0 }, "test_3": { "id": "test_3", "title": "Test 3", "questions": [ ], "__typename": "Test", "pid": 0 } } }, "result": { "tests": [ "test_1", "test_2", "test_3" ] } }

यहाँ से हम केवल .entities में रुचि रखते हैं

 const normalized = { entities: nRes.entities }

वैसे, नॉर्मिज़्र में प्रवेश करने की प्रक्रिया में, मुद्दों को पढ़ने के बाद, मुझे पता चला कि मैं एकमात्र ऐसा नहीं था जो इसे अपने इच्छित उद्देश्य के लिए उपयोग करने की कोशिश कर रहा था (शायद सिर्फ इसलिए कि यह लगभग एकमात्र ऐसा उपकरण है)। कई लोग सबसे अनुकूलन प्रारूप में परिणाम प्राप्त करने के लिए सभी प्रकार की सुविधाओं को तरसते हैं। लेकिन लेखक चकमक हैं।

उपरोक्त के मद्देनजर, फ्लैट का उपयोग करके नॉर्मिज़्र के परिणाम को समतल करना होगा (हम पुनरावर्ती रूप से घोंसले के वांछित स्तर तक विस्तार करेंगे):

 const flattened = flatten({ entities: nRes.entities }, { maxDepth: 3 })

हम निम्नलिखित प्राप्त करते हैं:

स्पायलर हेडिंग

 { "entities.answers.answer_1": { "id": "answer_1", "title": "Answer 1 (for q1)", "__typename": "Answer", "pid": "question_1" }, "entities.answers.answer_2": { "id": "answer_2", "title": "Answer 2 (for q1)", "__typename": "Answer", "pid": "question_1" }, "entities.answers.answer_1_2": { "id": "answer_1_2", "title": "Answer 1 (for q2)", "__typename": "Answer", "pid": "question_2" }, "entities.questions.question_1": { "id": "question_1", "title": "Question 1 (for t1)", "answers": [ "answer_1", "answer_2" ], "__typename": "Question", "pid": "test_1" }, "entities.questions.question_2": { "id": "question_2", "title": "Question 2 (for t1)", "answers": [ "answer_1_2" ], "__typename": "Question", "pid": "test_1" }, "entities.questions.question_1_2": { "id": "question_1_2", "title": "Question 1 (for t2)", "answers": [ ], "__typename": "Question", "pid": "test_2" }, "entities.tests.test_1": { "id": "test_1", "title": "Test 1", "questions": [ "question_1", "question_2" ], "__typename": "Test", "pid": 0 }, "entities.tests.test_2": { "id": "test_2", "title": "Test 2", "questions": [ "question_1_2" ], "__typename": "Test", "pid": 0 }, "entities.tests.test_3": { "id": "test_3", "title": "Test 3", "questions": [ ], "__typename": "Test", "pid": 0 } }

सूचकांकों से छुटकारा:

 Object.keys(flattened).forEach( (key)=> rows.push(flattened[key]) )

हमें मिलता है:

स्पायलर हेडिंग

 [ { "id": "answer_1", "title": "Answer 1 (for q1)", "__typename": "Answer", "pid": "question_1" }, { "id": "answer_2", "title": "Answer 2 (for q1)", "__typename": "Answer", "pid": "question_1" }, { "id": "answer_1_2", "title": "Answer 1 (for q2)", "__typename": "Answer", "pid": "question_2" }, { "id": "question_1", "title": "Question 1 (for t1)", "answers": [ "answer_1", "answer_2" ], "__typename": "Question", "pid": "test_1" }, { "id": "question_2", "title": "Question 2 (for t1)", "answers": [ "answer_1_2" ], "__typename": "Question", "pid": "test_1" }, { "id": "question_1_2", "title": "Question 1 (for t2)", "answers": [ ], "__typename": "Question", "pid": "test_2" }, { "id": "test_1", "title": "Test 1", "questions": [ "question_1", "question_2" ], "__typename": "Test", "pid": 0 }, { "id": "test_2", "title": "Test 2", "questions": [ "question_1_2" ], "__typename": "Test", "pid": 0 }, { "id": "test_3", "title": "Test 3", "questions": [ ], "__typename": "Test", "pid": 0 } ]

यहां शेष प्रश्नों, उत्तरों के शेष सरणियों को साफ करना संभव होगा, लेकिन ये ट्राइफल्स हैं - वे प्रदर्शन को प्रभावित नहीं करते हैं। और __typename की आवश्यकता है ताकि बाद में जब संपादन हो तो हम समझें कि हम क्या व्यवहार कर रहे हैं।

घटक में, परिणाम को उनके उदाहरण में दिखाया गया है:

 ... <CustomTreeData getChildRows={getChildRows} /> ... const getChildRows = (currentRow, rootRows) => { const childRows = rootRows.filter(r => r.pid === (currentRow ? currentRow.id : 0)); const res = childRows.length ? childRows : null return res } ...

ऐसा लगता है कि उपरोक्त सभी के लिए एक विकल्प हो सकता है कि आप सीधे ग्राफ़िकल स्टोर की सामग्री (अपोलो क्लाइंट में) को पढ़ सकें - वहां भी सब कुछ समतल होना चाहिए । लेकिन, ईमानदार होने के लिए, मुझे यह नहीं मिला कि यह कैसे मानक तरीके से किया जा सकता है, और मुझे बहुत यकीन नहीं है कि जिस प्रारूप में डेटा संग्रहीत किया गया है वह नए संस्करणों में नहीं बदलेगा।

DevExtreme- प्रतिक्रियाशील से CustomTreeData घटक के लिए GraphQL डेटा रूपांतरण

More articles: