next.js – How can I wait until all variables are loaded before running the graphQL query? (Apollo Client in NextJS)

The issue is that my graphQL query’s variables are undefined for a split second (because they have to load first), leading to a 400 bad request. Here’s the basic JSX:

const patternsQuery = gql`
  query PatternQuery($id: String!) {
    pattern(id: $id) {
const Component = () => {
  const { data } = useQuery(patternsQuery, {
    variables: { id: useRouter() }
  return <div>{data?}</div>

useRouter() takes a split second to load. For that reason, the variables are { id: undefined } at first. Here’s a screenshot of my browser’s console given the code above:
enter image description here

Read more here: Source link