Vue apollo 将结果添加到数组

如何解决Vue apollo 将结果添加到数组

这可能只是一个基本的 vue 问题，但我使用的是 Vue Apollo。 我有这样设置的组件：

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,page.value));
    };

    return { ...toRefs(result),...{ skip,more } };
  },});

如您所见，我有一个响应式对象设置，在调用组件设置方法时分配给它：

const result = reactive({ search: null,error: null });

Object.assign(result,page.value));

在我的模板中，我像这样迭代结果：

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

我的问题是，我想添加一个更多按钮：

<v-btn color="primary" @click="more()" v-if="search.hasMoreResults"
  >Show more</v-btn
>

按下时，它执行more()方法：

const more = () => {
  skip.value += 12;
  page.value += 1;

  Object.assign(result,page.value));
};

如您所见，我现在获得了第 2 页，因此第一页的产品不再在 搜索 对象中。 我想做的是从第一个查询中获取产品的副本，然后在每次按下更多按钮时添加到它们中。 我试过这个：

setup(props) {
  const { categorySlug } = toRefs(props);
  const page = ref(1);
  const skip = ref(0);
  const products = ref([]);
  const result = reactive({ search: null,error: null });

  Object.assign(result,page.value));

  const more = () => {
    skip.value += 12;
    page.value += 1;

    Object.assign(result,page.value));
  };

  products.value.push(result.search.value.items);

  return { ...toRefs(result),...{ products,skip,more } };
},

但是当我运行此代码时，出现错误：

[Vue 警告]：data() 中的错误：“TypeError：无法读取 null 的属性‘值’”

在这一行中抱怨 result.search.value：

products.value.push(result.search.value.items);

我相信是因为承诺没有得到解决。 我在 useListProducts 中使用 Apollo 的 useResult 方法，如下所示：

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,error };
}

谁能告诉我我做错了什么？

解决方法

经过一番挖掘，我在文档中找到了有关分页的内容（这实际上就是我正在做的事情），因此我设法将代码调整为：

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,skip,more };
  },});

这满足了 Estus 在评论中提到的所有内容，但它确实抛出了一个错误，我将创建一个关于 :D 的新帖子