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) {
      id
    }
  }
`
const Component = () => {
  const { data } = useQuery(patternsQuery, {
    variables: { id: useRouter().query.id }
  })
  console.log(data)
  return <div>{data?.pattern.name}</div>
}

useRouter().query.id 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:

Tags