Vue-apollo pagination question - merging objects

Hi, new here and happy to be here.

I’m having a heck of a time with Vue-Apollo. Specifically in regards to trying to do pagination and the objects wont play nice together.

Not sure if my issue is Vue related or I’m just having a hard time with transform-object-rest-spread.

OK, heres my full component, I’ve commented out where its going wrong.

Figuring this out, I’m home free. New to vue-apollo and def missing something.

Appreciate any help! Thanks in advance!

<template>
  <div class="Grid">
    <Product
      v-for="product in shop.products.edges"
      :key="product.node.id.toString()"
      :product="product.node"
    ></Product>

    <h2>Pagination</h2>
    <div v-if="shop">
      <div class="actions">
        <button
          v-if="showMoreEnabled"
          @click="showMore"
        >Show more</button>
      </div>
    </div>
  </div>
</template>;

<script>
  import gql from "graphql-tag";
  import Product from "./Product";

  // Query runs fine
  export const getShopData = gql`
    query getProducts($numProducts: Int!, $cursor: String) {
      shop {
        name
        description
        products(first: $numProducts, after: $cursor) {
          pageInfo {
            hasNextPage
            hasPreviousPage
          }
          edges {
            cursor
            node {
              id
              title
              tags
              options {
                id
                name
                values
              }
              variants(first: 25) {
                edges {
                  node {
                    id
                    title
                    selectedOptions {
                      name
                      value
                    }
                    price
                  }
                }
              }
              images(first: 2) {
                pageInfo {
                  hasNextPage
                  hasPreviousPage
                }
                edges {
                  node {
                    transformedSrc(maxWidth: 400)
                  }
                }
              }
            }
          }
        }
      }
    }
  `;

  export default {
    components: {
      Product
    },
    data() {
      return {
        shop: {},
        showMoreEnabled: true,
        numProducts: 16,
        cursor: ""
      };
    },
    apollo: {
      shop: {
        query: getShopData,
        variables: {
          numProducts: 16
        },
        update(res) {
         // Still all good
          return res.shop;
        }
      }
    },
    methods: {
      showMore() {
        this.$apollo.queries.shop.fetchMore({
          variables: {
            numProducts: this.numProducts,
            cursor: this.shop.products.edges[this.shop.products.edges.length - 1]
              .cursor
          },
          // Here is where everything breaks
          updateQuery: (previousResult, { fetchMoreResult }) => {
            const prevProducts = previousResult.shop.products;
            const newProducts = fetchMoreResult.shop.products;
            return {
             // Get tons of warnings like:
             // invariant.esm.js?dbcc:29 Missing field name in {
                // "edges": [
                 //  {
                     // "cursor": "eyJsYXN0X2lkIjo1MjMzNTUwNjIzMjEsImxhc3RfdmFsdWUiOiI1MjMzNTUwNj
             // Just cannot get these sorted and going insane.
            // Using Shopify Storefront API if that helps. 
              shop: {
                __typename: previousResult.shop.__typename,
                products: [...prevProducts, ...newProducts]
              }
            };
          }
        });
      }
    },
  };
</script>
Invariant Violation: Store error: the application attempted to write an object with no provided typename but the store already contains an object with typename of Shop for the object of id $ROOT_QUERY.shop. ```