Duplicate requests with Villus and Nuxt

[Sander Struijk]

<script setup lang="ts">
  const { isDone, onData } = await useQuery<{ customers: { nodes: Customer[]; }; }>({
    query: /* GraphQL */`
      query GetCustomer($id: ID!)
      {
        customers(where: { id: { eq: $id }}) {
          nodes {
            id
            ...customerFragment
          }
        }
      }
    `,
    variables: {
      id: route.params.customerId
    },
  });
  
  onData(({ customers }) => {
    if (customers.nodes.length) {
      setCustomer(customers.nodes[0]);
    }
  });
</script>

When navigating to a page that contains such a setup script (it happens for all our pages) the query is run twice. If I set the fetchOnMount: false on the query it is only executed once, but the onData function is never called, so I am wondering what is happening here? How can i make sure that only one query is performed?

[Sander Struijk]

the problem was the await keyword in front of useQuery 🤦‍♂️ I know it shouldn't be there but blind as I am I didn't see it...