increased number of calls 'onResult' for 'useQuery' #1473

akomratov · 2023-02-17T15:50:08Z

akomratov
Feb 17, 2023

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

Answered by websitevirtuoso

Feb 21, 2023

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…

View full answer

websitevirtuoso · 2023-02-21T18:47:33Z

websitevirtuoso
Feb 21, 2023

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

0 replies

websitevirtuoso · 2023-02-21T18:48:42Z

websitevirtuoso
Feb 21, 2023

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

0 replies

akomratov · 2023-02-21T20:27:02Z

akomratov
Feb 21, 2023
Author

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

0 replies

websitevirtuoso · 2023-02-21T20:43:37Z

websitevirtuoso
Feb 21, 2023

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

0 replies

websitevirtuoso · 2023-02-21T20:45:38Z

websitevirtuoso
Feb 21, 2023

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)
  })
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

increased number of calls 'onResult' for 'useQuery' #1473

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 5 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Uh oh!

increased number of calls 'onResult' for 'useQuery' #1473

Uh oh!

Uh oh!

akomratov Feb 17, 2023

Replies: 5 comments

Uh oh!

websitevirtuoso Feb 21, 2023

Uh oh!

websitevirtuoso Feb 21, 2023

Uh oh!

akomratov Feb 21, 2023 Author

Uh oh!

Uh oh!

websitevirtuoso Feb 21, 2023

Uh oh!

websitevirtuoso Feb 21, 2023

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

akomratov
Feb 17, 2023

websitevirtuoso
Feb 21, 2023

websitevirtuoso
Feb 21, 2023

akomratov
Feb 21, 2023
Author

websitevirtuoso
Feb 21, 2023

websitevirtuoso
Feb 21, 2023