Need some help with Graphql and Vue 3.
Look at this request:

const {
  result,
  loading,
  error,
  refetch,
  onResult,
  load
} = useLazyQuery(unitsQuery, variables, {
  fetchPolicy: 'no-cache',
  clientId: 'default'
});

I’m using useLazyQuery because it allows me to handle requests after the user interacts with the app, such as selecting a filter.
For exemple, I have this $q.dialog (Quasar Dialog Plugin) that sends me a payload and I can handle some event:

function showDialog() {
  const dialog = $q.dialog({
    component: ReportsDialog,
    // props forwarded to your custom component
    componentProps: {
      firstDateRange: store.period_filters.first_date_range,
      secondDateRange: store.period_filters.last_date_range
    }
  }).onOk((payload) => {
    console.log('OK');
    // Receives payload from callbackFn
    console.log('--jsdno0 debug payload received', payload);
    
    // Set variables values
    variables.value = {
      unitIds: payload.units,
      status: 'paid',
      dateRange: payload.range
    };
    // Proceed to make a request with 'load() from useLazyQuery'
    load();
  }).onCancel(() => {
    console.log('Cancel');
  }).onDismiss(() => {
    console.log('Called on OK or Cancel');
  });
}

Is this the best way to handle this? Is there any way to further optimize this request?