Vue apollo add results to array - vue.js

Question

This is probably just a basic vue question, but I am using Vue Apollo.
I have this component that is setup like this:
export default defineComponent({
name: "Products",
components: { Product },
props: {
categorySlug: {
type: String,
required: true,
},
},
setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const result = reactive({ search: null, laoding: null, error: null });
Object.assign(result, useListProducts(categorySlug.value, page.value));
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result, useListProducts(categorySlug.value, page.value));
};
return { ...toRefs(result), ...{ skip, more } };
},
});
As you can see I have a reactive object setup which is assigned to when the component setup method is invoked:
const result = reactive({ search: null, laoding: null, error: null });
Object.assign(result, useListProducts(categorySlug.value, page.value));
In my template, I iterate over the results like this:
<base-fade-up class="row" :duration="0.1" tag="div">
<v-col
cols="12"
xl="2"
v-for="(product, index) in products"
:key="product.id"
:data-index="index"
:data-skip="skip"
>
<product class="product" :product="product"></product>
</v-col>
</base-fade-up>
The problem I have, is that I want to add a more button:
<v-btn color="primary" #click="more()" v-if="search.hasMoreResults"
>Show more</v-btn
>
When pressed, it executes the more() method:
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result, useListProducts(categorySlug.value, page.value));
};
As you can see, I am now getting page 2, so page one products are no longer in the search object.
What I would like to do is get a copy of the products from the first query and then add to them every time the more button is pressed.
I tried this:
setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const products = ref([]);
const result = reactive({ search: null, laoding: null, error: null });
Object.assign(result, useListProducts(categorySlug.value, page.value));
const more = () => {
skip.value += 12;
page.value += 1;
Object.assign(result, useListProducts(categorySlug.value, page.value));
};
products.value.push(result.search.value.items);
return { ...toRefs(result), ...{ products, skip, more } };
},
but when I run this code, I get an error:
[Vue warn]: Error in data(): "TypeError: Cannot read property 'value' of null"
which is complaining about result.search.value in this line:
products.value.push(result.search.value.items);
I believe it's because the promise has not been resolved.
I am using Apollo's useResult method inside my useListProducts which looks like this:
import { useQuery, useResult } from "#vue/apollo-composable";
import * as listProducts from "#/graphql/api/query.products.gql";
export function useListProducts(slug: string, page = 1, itemsToShow = 12) {
const request: {
identifier?: string;
searchTerm: string;
itemsToShow: number;
page: number;
filters: any;
facets: string[];
} = {
searchTerm: "*",
itemsToShow,
page,
filters: [
{
key: "CategorySlug",
value: `'${slug}'`,
},
],
facets: ["Criteria/Attribute,count:100"],
};
const { result, loading, error } = useQuery(listProducts, {
search: request,
});
const search = useResult(result, null, (data) => data.search);
return { search, loading, error };
}
Can anyone tell me what I am doing wrong?

Answer 1

After some digging around, I found something in the documentation about pagination (which is essentially what I am doing), so because of that I managed to adjust my code to this:
export default defineComponent({
name: "Products",
components: { Product },
props: {
categorySlug: {
type: String,
required: true,
},
},
setup(props) {
const { categorySlug } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const { search, loading, error, fetchMore } = useListProducts(
categorySlug.value,
page.value
);
const more = () => {
skip.value += 12;
page.value += 1;
const request = {
...params,
...{
page: page.value,
filters: [
{
key: "CategorySlug",
value: `'${categorySlug.value}'`,
},
],
},
};
fetchMore({
variables: { search: request },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
//return fetchMoreResult;
console.log(fetchMoreResult);
return Object.assign({}, prev, {
search: {
hasMoreResults: fetchMoreResult.search.hasMoreResults,
total: fetchMoreResult.search.total,
facets: [...prev.search.facets, ...fetchMoreResult.search.facets],
items: [...prev.search.items, ...fetchMoreResult.search.items],
__typename: prev["__typename"],
},
});
},
});
};
return { search, loading, error, skip, more };
},
});
Which satisfies everything Estus mentioned in the comments, but it does throw an error, which I will create a new post about :D