如何在 router.query 之后运行 GraphQL 查询？

Posted 2023-03-08

【中文标题】如何在 router.query 之后运行 GraphQL 查询？

【英文标题】：How do I run GraphQL queries after router.query?

【发布时间】：2021-04-14 23:24:38

【问题描述】：

不久前开始学习 React 和 Next，但在完成这项工作时遇到了麻烦。 也尝试使用 useLazyQuery 但无法弄清楚如何正确返回。

...
const TaskSingle = () => 

    const  category  = router.query;

    const  loading, error, data  = useQuery(GET_TASKS, 
        variables: 
            taskFilter: 
                taskCategory: 5, // works
                // taskCategory: category // doesn't work
            ,
        ,
    );


const  categories  = data;

return (
  <div>
  categories.map((cat) => 
      <div key=cat.id>
          cat.name
      </div>
  )
 </div>
)

当我尝试使用“类别”而不是数字时，我收到此错误： http://hidden-url:3000/graphql:1 加载资源失败：服务器响应状态为 400 (Bad Request)

【问题讨论】：

useQuery 和 useLazyQuery 来自哪个库？是阿波罗吗？

@juliomalves 是的，阿波罗/客户

什么不完全有效？你有什么错误吗？如果是这样，您也可以发布吗？

嗯，我可能已经找到了这个。 “类别”是一个字符串，我需要一个数字

使用的 const category = Number(router.query.category);而不是 const category = router.query 并且它正在工作......

【参考方案1】：

最后我用了

const category = Number(router.query.category);

而不是

const category = router.query;

因为我需要一个数字而不是字符串。