如何将组件props中的变量传递给useQuery作为GraphQL查询参数？

核心错误原因 #

• 组件props接收错误：React函数组件的第一个入参是完整的props对象，你当前的写法直接将整个props对象命名为courseId，没有正确解构出props中携带的courseId字段，导致取值错误。
• useQuery调用语法错误：你把variables配置对象写在了useQuery的调用括号外部，括号配对错误引发了变量作用域混乱，最终触发重复声明、变量未读取等TS报错。

修复后代码 #

组件定义+useQuery调用部分 #

const AnalyticsStatistic = ({ courseId }: { courseId: string }) => {
  const { loading, error, data } = useQuery(GET_ANALYTICS, {
    variables: { courseId },
  })
  // 后续组件逻辑
}

原有GraphQL查询代码无需修改，保持如下即可 #

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

内容的提问来源于stack exchange，提问作者IosebOne