-
-
Notifications
You must be signed in to change notification settings - Fork 522
increased number of calls 'onResult' for 'useQuery' #1473
-
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
Beta Was this translation helpful? Give feedback.
All reactions
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...Replies: 5 comments
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
Here link how I did everything
https://stackblitz.com/edit/vitejs-vite-gcsh34?file=src%2FApp.vue
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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)
})
}
Beta Was this translation helpful? Give feedback.