Really need help with event triggered queries a composable

[scottcarlton]

I'm having constant problems with this implementation of queries on an event. You get a warning if you use useAsyncQuery or useLazyAsync and you get a waring if you use useQuery inside of a method you get the can't stop automatically. So what is the proper way to query with nuxt/apollo on an event like click? Would really appreciate because seems no matter what I try there is some waring say not to do x.

Example Test

import { testQuery as VERIFY_TEST } from '../graphql/v1/test.queries.gql';

export function useTest() {
  const enabled = ref(false);

  // Alt works but is triggered twice because the enabled is not present
  const { refetch } = useQuery(VERIFY_ACCOUNT, { email: '' })
  // Query is not triggered and result is undefined
  const { refetch } = useQuery(VERIFY_ACCOUNT, { email: '' }, { enabled: enabled.value })
  async function test(email) {
    enabled.value = true;
    const response = await refetch({ email }); // response is undefined when using enabled
    return response;
  }

  return {
    test
  }
}

//
const testEffect = async () => {
 const { data } = await test("[email protected]") // Fails because of undefined response
}

Any help would be much appreciated.

[scottcarlton]

This seems to be working but seems like it really smells. A lot of work just to do simple event trigged query.

import { testQuery as VERIFY_TEST } from '../graphql/v1/test.queries.gql';

export function useTest() {
  const enabled = ref({ enabled: false  });
  const variables = ref({ email: '' })
  const query = useQuery(VERIFY_ACCOUNT, variables, enabled)

  async function test(email) {
    enabled.value = { enabled: true };
    variables.value = { email }
    query.refetch(variables);
    return query;
  }

  return {
    test
  }
}

// In script setup in pages
const { test } = useTest()

const loading = ref(false)
const testEffect = async () => {
  loading.value = true
  const { onResult } = await test('[email protected]')
  onResult(({ data }) => {
    if (data) {
      console.log(data)
      loading.value = false
    }
  })
}

[scottcarlton]

Well looks like you can use useLazyQuery(query, variables) from vue/apollo in nuxtjs/apollo instead of all this work above.