How do I run GraphQL queries after router.query?

Question

Started learning React and Next just some time ago and having trouble making this work. Also tried using useLazyQuery but could not figure out how to return properly.

...
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>
)

When I try to use "category" instead of a number I'm getting this error: http://hidden-url:3000/graphql:1 Failed to load resource: the server responded with a status of 400 (Bad Request)

Answer 1

In the end I used

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

instead of

const { category} = router.query;

because I needed a number and not a string.