Execute Query on Button Click

[T0miii]

Hello,

i have a Use Case where i need to run a query on a button click then wait for the result.
Implementation looks like this:

const executePreview = async () => {
  const {data: result} = await useQuery({
    query: variablesQuery,
    variables
  })
  console.table(result)
}

This will throw an error that: Uncaught (in promise) Error: use* functions may only be called during the setup() or other lifecycle hooks.

What is the recommended way to execute a Query on demand?

QUICK UPDATE:

so i found a workaround or intended implementation

const result = useQuery({
  query: variablesQuery,
  variables,
  pause: true
})

const executePreview = async () => {
  const data = await result.executeQuery()
  console.log(data)
}

Pause the query by default and execute when needed.

best regards,
Tamas

[JoviDeCroock]

That pattern is lined out here if you want to wait for it in the preview you are better off using the client by means of useClient and doing .query(variablesQuery, variables).toPromise(). Generally in React using the rerender pattern will provide you with more benefits 😅

[T0miii]

I think the update i did in the question is the Vue approach to your answer, my problem with that one is , that i cant change the variables with the .executeQuery method, or i just dont see it how.

[T0miii]

i leave my solution here as reference for some one with similar issues, still not happy with it , feels quit clunky.

const variables = reactive({})
const result = useQuery({
  query: variablesQuery,
  variables,
  pause: true
})

const loading = ref<boolean>(false)
const variableGroups = ref<VariableGroup[]>([])
const executePreview = async () => {

  Object.assign(variables, {
    siteId: localStorage.getItem("activeSiteId"),
    pipelineTemplatedId: form.value.pipelineId,
    productTypeIds: product.value.id
  })

  loading.value = true;
  const {data} = await result.executeQuery({requestPolicy : 'network-only'})
  loading.value = false;
  variableGroups.value = data.value.variableGroups
}