increased number of calls 'onResult' for 'useQuery'

[akomratov]

Hello team,

I've implemented server-side pagination for QTable component as per Quasar guide:
https://quasar.dev/vue-components/table#server-side-pagination-filter-and-sorting

in onResult returned by useQuery I've put console.log():

cosnt rows = ref([])

function onRequest() {
    console.log('-> onResult');
    ...
    const { onResult } = useQuery(gql(querySkillsPaged), gqlVariables, gqlQueryOptions);

    onResult(response => {
        console.log(' onResult(): data=', response.data);
        rows.value.splice(0, rows.value.length, ...(response.data?.skillsPaged ?? []))
    });
   ...
}

My observation:
Each time I change the current page of the Table (or change sort order of the Table) I observe in console that the number of onResult calls per single onRequest has been increased: 2, 4, 6, 8, 10, 12, 14, etc

However there is a single HTTP request over network
I use fetchPolicy = cache-and-network

I would expect 2 calls of onResult per single onRequest: the first call is for data from cache, the second is for data received in HTTP response

onRequest is an event handler defined in template for q-table @request

My question

Is this a bug or I misuse useQuery() / onResult()?

Sample output to console while just changing table sort order (desc, asc, no sorting):

-> onRequest
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
-> onRequest
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
-> onRequest
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
-> onRequest
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
-> onRequest
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}
 onResult(): data= {skillsPaged: Array(10)}

the version:
vue/apollo-composable = 4.0.0-beta.2

[websitevirtuoso]

I used the same but with vuetify v3. Everything works as expected. If you could create bliz repo to show it. I could help you

[websitevirtuoso]

Here link how I did everything
https://stackblitz.com/edit/vitejs-vite-gcsh34?file=src%2FApp.vue

[akomratov]

Thanks for your input.
Actually I've come to the same solution: I moved useQuery() from event handler to the top level, which is script setup in Composition API, and number of onResult() calls is not increasing any more (it is 2). The only thing I do in onResult() is changing request variables.
useMutation() is not affected with issue of that kind, I left useMutation() in event handlers.

So, I'd like to clarify if that was my fault by mis-implementing useQuery() or that is a bug

[websitevirtuoso]

Yes everything works as expected. From your code I can see

function onRequest() {
    console.log('-> onResult');
    ...
    const { onResult } = useQuery(gql(querySkillsPaged), gqlVariables, gqlQueryOptions);

    onResult(response => {
        console.log(' onResult(): data=', response.data);
        rows.value.splice(0, rows.value.length, ...(response.data?.skillsPaged ?? []))
    });
   ...
}

Rewrite to

onst { onResult } = useQuery(gql(querySkillsPaged), gqlVariables, gqlQueryOptions);

onResult(response => {
    console.log(' onResult(): data=', response.data);
    rows.value.splice(0, rows.value.length, ...(response.data?.skillsPaged ?? []))
});

function onRequest() {
    console.log('-> onResult');
}

Mutation and query must be defined at top level not inside the function. Check documantation for more information or provide example I will try to help

[websitevirtuoso]

Example with mutation for my app

// libs
import { Form, SubmissionContext } from 'vee-validate'
// custom
import { gqlHandleError } from '@/helpers/handleErrors'
import useVSchema from '../../helpers/validationSchemaPost'
import PostUpsert from '../../graphql/mutations/postUpsert.gql'
import { PostInput } from '@/modules/blog/types'
// components
import PostFieldTitle from '@/modules/blog/components/posts/form/PostFieldTitle.vue'
import PostFieldSlug from '@/modules/blog/components/posts/form/PostFieldSlug.vue'
import PostFieldStatus from '@/modules/blog/components/posts/form/PostFieldStatus.vue'
import PostFieldCategory from '@/modules/blog/components/posts/form/PostFieldCategory.vue'
import PostFieldContent from '@/modules/blog/components/posts/form/PostFieldContent.vue'
import PostFieldMetaTitle from '@/modules/blog/components/posts/form/PostFieldMetaTitle.vue'
import PostFieldMetaKeyword from '@/modules/blog/components/posts/form/PostFieldMetaKeyword.vue'
import PostFieldMetaDescription from '@/modules/blog/components/posts/form/PostFieldMetaDescription.vue'

const router = useRouter()
const { t } = useI18n()
const vSchema = useVSchema(t)
const notification = useNotification()
const tab = ref(null)

const { mutate, loading, onDone, onError } = useMutation(PostUpsert)

onDone(() => {
  notification.success(t('action.create_success'))
  router.push({ name: 'posts' })
})

const createPost = (
  { title, slug, content, meta_title, meta_keyword, meta_description, status, category_id }: PostInput,
  form: SubmissionContext
) => {
  mutate({ title, slug, content, meta_title, meta_keyword, meta_description, status, category_id })

  onError((error) => {
    gqlHandleError(error, form)
  })
}