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)

What library is `useQuery` and `useLazyQuery` coming from? Is it Apollo? — juliomalves, Jan 09 '21 at 15:11
What doesn't work exactly? Do you get any error? If so, could you post that too? — juliomalves, Jan 09 '21 at 18:52
Uhm I might have figured out this one. "category" is a string and I needed a number — emirowski, Jan 11 '21 at 17:26
Used const category = Number(router.query.category); instead of const { category} = router.query and it's working ... — emirowski, Jan 11 '21 at 17:28
Makes sense. Don't forget to add the solution as the answer if that worked, to help future people who stumble upon this question. — juliomalves, Jan 11 '21 at 17:34

score 0 · Accepted Answer · answered Jan 13 '21 at 17:18

0

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.

answered Jan 13 '21 at 17:18

emirowski

265
3
13

How do I run GraphQL queries after router.query?

1 Answers1