ReactJS：基于状态动态导入 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}")
        }
      }
    }
  `
}