मैं अपने स्कीमा से नाम ट्रांसलेटेड नामक एक विशिष्ट चर से पूछताछ करता हूं, यह लोकेल के पैरामीटर को एन-सीए, एफआर-एफए आदि के साथ लेता है और फ्रेंच में वांछित शब्द प्राप्त करता है। और जिस तरह से मैं इसे अपने फ्रंटएंड रिएक्टज एप्लिकेशन में संभालता हूं वह इस प्रकार है:

export const App = () => {
const { locale } = useIntl()

const LOAD_TABLE = gql`
query getItems($id: String!) {
  Items(id: $id) {
    id
    notes
    nameTranslate(language:"${l}")
    defaultClass {
      nameTranslate(language:"${l}")
    }
  }
}
`
useEffect(() => {
// a function to fetch LOAD_TABLE 
},[locale])
}

उपरोक्त कोड पूरी तरह से ठीक काम करता है और जब भी मैं लोकेल वेरिएबल को बदलता हूं तो यह क्वेरी को फिर से प्राप्त करता है। लेकिन इसके साथ समस्या यह है कि मेरे पास कई अन्य प्रश्न हैं जिनके साथ मुझे काम करने की ज़रूरत है, मेरी फ़ाइल की लंबाई बहुत लंबी और प्रबंधित करने में कठिन हो जाती है। उसी समय अगर मैं फ़ाइल को बाहर निकालता हूं, तो मैं नाम ट्रांसलेट के लिए गतिशील रूप से एक प्रकार जोड़ने का विशेषाधिकार खो देता हूं .. मैं इस मुद्दे को कैसे हल कर सकता हूं?

0
WildThing 15 नवम्बर 2021, 20:50

1 उत्तर

सबसे बढ़िया उत्तर

आप कस्टम हुक का उपयोग करके इसे अधिक मॉड्यूलर लेकिन फिर भी गतिशील बना सकते हैं, उदाहरण के लिए:

// hooks/useItemsQuery.js
function useItemsQuery(locale) {
  const itemsQuery = useMemo(() => gql`
    query getItems($id: String!) {
      Items(id: $id) {
        id
        notes
        nameTranslate(language:"${locale}")
        defaultClass {
        nameTranslate(language:"${locale}")
        }
      }
    }
  `, [locale])

  return itemsQuery
}

// App.js
export const App = () => {
  const { locale } = useIntl()

  const itemsQuery = useItemsQuery(locale)
  
  useEffect(() => {
    // a function to fetch itemsQuery
  }, [itemsQuery])
}

या यदि आपको रिएक्ट के बाहर कॉल करने की आवश्यकता है तो बस एक सामान्य कार्य करेगा। मैं सोचता हूं इसका कोई पूर्ण प्रभाव नहीं होगा क्योंकि es6 tpl अक्षर कैश किए जाते हैं (gql`` भाग) जब तक कि किसी फ़ंक्शन के अंदर भी चर नहीं बदलते हैं। अगर ऐसा है तो ऊपर दिए गए useMemo का उपयोग वैसे भी बेमानी है।

function itemsQuery(locale) {
  return gql`
    query getItems($id: String!) {
      Items(id: $id) {
        id
        notes
        nameTranslate(language:"${locale}")
        defaultClass {
        nameTranslate(language:"${locale}")
        }
      }
    }
  `
}
1
Dominic 15 नवम्बर 2021, 22:37
धन्यवाद यह मददगार है लेकिन यहां ऐसा लगता है कि मुझे प्रतिक्रिया घटक के अंदर useMemo को कॉल करना होगा, क्या यह संभव है कि मैं इसे सामान्य फ़ाइल में उपयोग कर सकूं? उपयोग मेमो का उपयोग किए बिना
 – 
WildThing
15 नवम्बर 2021, 21:12
useMemo (और अन्य हुक) को कस्टम हुक से भी बुलाया जा सकता है।
 – 
Drew Reese
15 नवम्बर 2021, 22:06
बाहर से आप इसके बजाय एक सामान्य फ़ंक्शन बना सकते हैं (use जैसे itemsQuery से शुरू नहीं, और useMemo के उपयोग को हटा दें। इसके बारे में सोचते हुए, ES6 स्ट्रिंग्स को वैसे भी कैश किया जाता है, इसलिए हो सकता है useMemo का उपयोग न करने के लिए कोई पूर्ण ओवरहेड नहीं - एक उदाहरण के साथ अपडेट होगा
 – 
Dominic
15 नवम्बर 2021, 22:34