ReactJS:基于State动态导入GraphQL查询

Question

我从我的模式中查询一个名为nameTranslated的特定变量，它使用En CA、Fr FA等获取区域设置的参数，并获得所需的法语单词。我在前端reactjs应用程序中处理此问题的方式如下：

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])
}

上面的代码运行得非常好，每当我更改区域设置变量时，它都会重新获取查询。但问题是，我还有很多其他查询需要处理，我的文件长度变得太长，很难管理。同时，如果我取出文件，我将失去为nameTranslate动态添加类型的特权。。我该如何解决这个问题？

Answer 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])
}

或者，如果你需要在React之外调用，只需要一个普通函数就可以了。我认为这不会对性能产生影响，因为只要变量不改变，即使在函数内部，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}")
}
}
}
`
}