时间戳

首页 > 解决方案 > 如何在 router.query 之后运行 GraphQL 查询？

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

问题描述

前段时间开始学习 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（错误请求）

标签： reactjsgraphqlnext.jsapollo-client

解决方案

最后我用了

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

代替

const { category} = router.query;

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

推荐阅读