I am new to vue, but I don't understand why no one seems to be able to answer this question. I would have thought it was simple, but I can't find anywhere talking about it. I have this method getCategory that uses Apollo to query our graphQL API. The logic looks like this:
import { useQuery, useResult } from "@vue/apollo-composable";
import * as getCategoryBySlug from "@graphql/api/query.category.gql";
export function useGetCategory(slug: string) {
const { result, loading, error } = useQuery(getCategoryBySlug, { slug });
const category = useResult(result, null, (data) => data.categoryBySlug);
return { category, loading, error };
}
When I want to use this in a component, I can simply do this:
import { computed, defineComponent } from "@vue/composition-api";
import { useGetCategory } from "@logic/get-category";
import CategoryTitle from "@components/category-title/category-title.component.vue";
import Products from "@components/products/products.component.vue";
import { defineComponent } from "@vue/composition-api";
import { useGetCategory } from "@logic/get-category";
import CategoryTitle from "@components/category-title/category-title.component.vue";
import Products from "@components/products/products.component.vue";
export default defineComponent({
name: "Categories",
components: { CategoryTitle, Products },
setup(_, context) {
const { category, loading, error } = useGetCategory(
context.root.$route.params.slug
);
return { category, loading, error };
},
});
And that's fine. Then in my template, I can do what I need to do like this:
<template>
<div>
<category-title v-if="category" :category="category"> </category-title>
<base-loader :loading="loading"> </base-loader>
<products :category="category" v-if="category"></products>
</div>
</template>
<script src="./category.component.ts" lang="ts"></script>
<style src="./category.component.scss" lang="scss" scoped></style>
Now comes the issue (which in my mind, should be dead easy). I need to handle route changes, specifically the slug. So I have changed my code to this:
import { computed, defineComponent } from "@vue/composition-api";
import { useGetCategory } from "@logic/get-category";
import CategoryTitle from "@components/category-title/category-title.component.vue";
import Products from "@components/products/products.component.vue";
export default defineComponent({
name: "Categories",
components: { CategoryTitle, Products },
setup(_, context) {
const result = computed(() => {
return useGetCategory(context.root.$route.params.slug);
});
return { result };
},
});
which means I have to update my template to this:
<template>
<div v-if="result">
<category-title
v-if="result.category.value"
:category="result.category.value"
>
</category-title>
<base-loader :loading="result.loading.value"> </base-loader>
<products
:category="result.category.value"
v-if="result.category.value"
></products>
</div>
</template>
<script src="./category.component.ts" lang="ts"></script>
<style src="./category.component.scss" lang="scss" scoped></style>
Which is just ugly. My question is this, can I destructure the computed property or something so my template can stay the same as it was?
You can destructure object returned by your computed
but you will lose reactivity (category
, loading
, error
variables created by destructuring computed
value will not be updated when computed
re-evaluates)
What you want is to use Vue Apollo ability to refresh query when it's variables change
import { useQuery, useResult } from "@vue/apollo-composable";
import * as getCategoryBySlug from "@graphql/api/query.category.gql";
export function useGetCategory(params) {
const { result, loading, error } = useQuery(getCategoryBySlug, params);
const category = useResult(result, null, (data) => data.categoryBySlug);
return { category, loading, error };
}
in component...
import { computed, defineComponent } from "@vue/composition-api";
import { useGetCategory } from "@logic/get-category";
import CategoryTitle from "@components/category-title/category-title.component.vue";
import Products from "@components/products/products.component.vue";
export default defineComponent({
name: "Categories",
components: { CategoryTitle, Products },
setup(_, context) {
const params = computed(() =>
return {
slug: context.root.$route.params.slug
}
)
const { category, loading, error } = useGetCategory(params);
},
});