如何从组件道具传递 useQuery 变量？

Question

我有这个问题：

const GET_ANALYTICS = gql`
  query($courseId: String) {
    getStudentsAnalytics(courseId: $courseId) {
        totalStudents,
        studentsNotStartedCoursesYetPercentage,
        studentsFinishedCoursesPercentage,
        studentsInProgressCoursesPercentage,
        studentsCompletedQuizzesPercentage,
        studentsFailedQuizzesPercentage,
        studentsInProgressQuizzesPercentage
    }
}
`

并且在代码中我试图从组件 prop 传递变量：

const AnalyticsStatistic = (courseId: string) => {

  const { loading, error, data } = useQuery(GET_ANALYTICS){
   variables: {courseId},
 }

对于红色带下划线的参数 courseId 出现以下错误：'courseId' 已声明，但其值从未读取。ts(6133) 重复标识符 'courseId'.ts(2300)

对于内部变量：{courseId} 出现这些错误：重复标识符 'courseId'.ts(2300) 绑定元素“courseId”隐式具有“任何”类型。ts(7031)

for inside courseId

for outside courseId

problems in console

Answer 1

您的GET_ANALYTICS 查询是这样的，因此您不必在对象内传递 courseId 检查下面的代码

const GET_ANALYTICS = gql`
  query($courseId: String) {
    getStudentsAnalytics(courseId: $courseId) {
        ....
    }
}
`

应该像这样使用相应的 useQuery 钩子，并将 courseId 参数设置为 string 而不是 any 因为查询需要一个字符串

const AnalyticsStatistic = (courseId: string) => {
                                           //? FIX 
 const { loading, error, data } = useQuery(GET_ANALYTICS,{
  variables: {courseId},
})

如果您得到未使用的变量，则将其添加到 tsconfig.json

{
  "compilerOptions": {
    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}