How to pass dynamic or different query strings to useQuery API

[vikashpisces]

In Vue 3, I wanted to build a query builder which will have a text box for query and an output field to display result.

I was trying to use useQuery with a reactive query field, binding done to the text box but for some reason useQuery always uses the first query string passed to it, does not take a new string changes. Any workaround please? My code is here:

// TestComponent.vue
TestComponent.vue.txt

Generate Result

{{result}}

<script setup lang="ts"> import { useGraphQL } from '@/use/useGraphQL' import { ref } from 'vue' const query = ref('') const { result, loading, refetch, onError } = useGraphQL(query.value) const generateResult = () => { if (!query.value) { return } refetch() } onError(error => { console.log('Error: ', error) result.value = error }) </script> <style lang="scss" scoped> </style>

//useGraphQL.ts
import { useQuery } from '@vue/apollo-composable'
import { gql } from 'graphql-tag'

export const useGraphQL = ($query: string, $variables: Object = {}, $options: Object = {}) => {
const {
result,
loading,
error,
refetch,
variables,
onResult,
onError
} = useQuery(gql${$query}, $variables, $options)

return {
result,
loading,
error,
refetch,
variables,
onResult,
onError
}
}

since query reactive variable is default empty, useQuery sticks with the empty query and does not change even if we paste a valid query from UI.