useGlobalQueryLoading() do not work, when wrapping useQuery in a an promise resolving in onResult() callback.

[joelmandell]

I have written an helper function that uses useQuery. It is in use in an Vuex-module. I have promisified it.
In my App.vue I'm using "const loading = useGlobalQueryLoading()".

If I use useQuery or useLazyQuery on its own, the loading works.

Here is my useQuery transformed into an useQueryAsync:

const useQueryAsync = async (query: any,variables: any = null,options: any = null): Promise<any> => {
    const {onResult} = useQuery(query,variables,options)

    const returnResult = await new Promise((resolve,reject) => {
        onResult(queryResult => {
           resolve(queryResult.data[Object.keys(queryResult.data)[0]])
        })
    })

    return returnResult
}

And here is the code that uses it, that does not trigger loading indicator:

 swishPayment: () => async (amount: Ref<number>,msg: Ref<string>) => {     
        const result = await useQueryAsync(gql`
            query($amount: Int, $msg: String) {
                swishPayment(amount:$amount, msg:$msg)
            }`
        ,() => ({amount:amount.value,msg:msg}),{fetchPolicy:'no-cache',debounce:1000})

        return result
    },

But here is the same query that is above, but using useLazyQuery. But it does not behave the way I want it to, there fore my try to implement it as an promise.

 swishPayment: () => (amount: Ref<number>,msg: Ref<string>) => {     
        const {result,load} = useLazyQuery(gql`
            query($amount: Int, $msg: String) {
                 swishPayment(amount:$amount, msg:$msg)
            }
        `,() => ({amount:amount.value,msg:msg}),{fetchPolicy:'no-cache',debounce:1000})

        return {
            generateQr:load,
            qrImage:result
        }
    },

What am I doing wrong, can somebody point me in the right direction?

[Akryum]

Move useLazyQuery out of the function, it should be called during the component setup.

[joelmandell]

I am using it in a Vuex-store, outside a component (import { provideApolloClient } from '@vue/apollo-composable').

[joelmandell]

@Akryum It is working fine outside component when using useQuery purely. The "useGlobalQueryLoading" triggers and sets my loading ref in App.vue. But when it is in an promise like the one in my first code example, useGlobalQueryLoading does not change state on my loading ref.

[joelmandell]

OKay this does not seem possible because dependency on getCurrentInstance(). But I am still confused why it is working when used in Vuex when used purely and not promisified.

I think I will do what I did before, do the queries with the client. And build a helper function that set global loading state in a vuex-module.

[martinszeltins]

@Akryum

Move useLazyQuery out of the function, it should be called during the component setup.

I have the same problem. To better organize my codebase, I have moved useLazyQuery() into it's own dataApi.js file. This causes useGlobalQueryLoading() not to work.

Are there any solutions for this?

Here is my settingsApi.js

import gql from 'graphql-tag'
import { useLazyQuery } from '@vue/apollo-composable'
import { defaultQueryOptions, getGraphQLEndpoint } from '@/services/graphQL'

export default {
    async getSettings() {
        return new Promise((resolve, reject) => {
            const { load: loadSettings, onResult, onError } = useLazyQuery(gql`
                query getSettings {
                    settings {
                        title
                    }
                }
            `, null, {
                ...defaultQueryOptions,
                context: {
                    'uri': getGraphQLEndpoint()
                }
            })

            loadSettings()

            onResult(result => {
                resolve(result)
            })

            onError(error => {
                reject(error)
            })
        })
    }
}