Facing HTTP ERROR undefined" on api call on adding product to wishlist (VSF + Magento 2 custom endpoint)

Hello all i am trying to add endpoints to magento & use them into vsf
(to set wishlist on server instead on local storage)

Here is the magento module
1.Attached

  1. Added extension to vue-storefront-api, to call magento service

    register wishlist in VSF api config “registeredExtensions”: [ “mailchimp-subscribe”, “example-magento-api”, “cms-data”, “mail-service”, “example-processor”, “wishlist-api” ],``

  2. added src/api/extensions/wishlist-api/index.js

    `import { apiStatus } from '../../../lib/util';`
    `import { Router } from 'express';`
    `import catalog from '../../catalog';`
    `import bodybuilder from 'bodybuilder'const Magento2Client = require('magento2-rest-client').Magento2Client/** endpoint /api/ext/wishlist-api */`
    `module.exports = ({ config, db }) => {  const client = Magento2Client(config.magento2.api)`
    `  client.addMethods('wishlist', function (restClient) {`
    `    return {`
    `      getProducts(customerId) {`
    `        return restClient.get(/wishlist/${customerId});`
    `      },`
    `      addProduct(customerId, productId) {`
    `        return restClient.post(/wishlist/${customerId}/${productId})`
    `      },`
    `      deleteProduct(customerId, productId) {`
    `        return restClient.delete(/wishlist/${customerId}/${productId})`
    `      }`
    `    }`
    `  })  const api = Router()`
    `  api.get('/:customerId', (req, res) => {`
    `    client.wishlist.getProducts(req.params.customerId)`
    `      .then(products => {`
    `        if (products.length) {`
    `          // need to return products in format VSF understands`
    `          return getProductsFromCatalog(products.map(x => x.product_id), req.query.storeCode)`
    `        } else {`
    `          return []`
    `        }`
    `      })`
    `      .then(result => {`
    `        apiStatus(res, result, 200)`
    `      })`
    `      .catch(err => {`
    `        apiStatus(res, err, 500);`
    `      })`
    `  })  api.post('/:customerId/:productId', (req, res) => {`
    `    client.wishlist.addProduct(req.params.customerId, req.params.productId)`
    `      .then(result => {`
    `        apiStatus(res, result, 200)`
    `      })`
    `      .catch(err => {`
    `        apiStatus(res, err, 500);`
    `      })`
    `  })  api.delete('/:customerId/:productId', (req, res) => {`
    `    client.wishlist.deleteProduct(req.params.customerId, req.params.productId)`
    `      .then(result => {`
    `        apiStatus(res, result, 200)`
    `      })`
    `      .catch(err => {`
    `        apiStatus(res, err, 500);`
    `      })`
    `  })  async function getProductsFromCatalog(ids, storeCode = 'default') {`
    `    const index = config.elasticsearch.indices.find(x=>x.match(new RegExp(_${storeCode}$))) || config.elasticsearch.indices[0]`
    `    try {`
    `      const resp = await queryCatalogRouteByProductId(ids, index)`
    `      if (resp.hits.hits.length) {`
    `        return resp.hits.hits`
    `      } else {`
    `        throw new Error(no products found in catalog ${index} for ids ${ids.join(', ')})`
    `      }`
    `    } catch (err) {`
    `      throw new Error(err)`
    `    }`
    `  }  function queryCatalogRouteByProductId(ids, index) {`
    `    return new Promise((rsv, rjs) => {`
    `      const res = { json: rsv }`
    `      const req = {`
    `        method: 'POST',`
    `        query: {},`
    `        url: /${index}/product/_search` ,
    `        body: bodybuilder()`
    `          .filter('terms', 'id', ids)`
    `          .build()`
    `      }`
    `      catalog({ config, db })(req, res)`
    `    })`
    `  }  return api`
    `}`
    
  3. Added business logic to vue-storefront, to call vue-storefront-api servicesadded enpoints in your VSF config

    "wishlist": {
    "pull_endpoint": "/api/ext/wishlist-api/{{customer_id}}",
    "additem_endpoint": "/api/ext/wishlist-api/{{customer_id}}/{{product_id}}",
    "deleteitem_endpoint": "/api/ext/wishlist-api/{{customer_id}}/{{product_id}}"
    },

  4. extended existing /core/modules/wishlist/store/actions.ts
    to call the services if user is logged in

    import Vue from 'vue'
    import { ActionTree } from 'vuex'
    import * as types from './mutation-types'
    import i18n from '@Vue Storefront/i18n'
    import { htmlDecode } from '@Vue Storefront/core/store/lib/filters'
    import rootStore from '@Vue Storefront/core/store'
    import RootState from '@Vue Storefront/core/types/RootState'
    import WishlistState from '../types/WishlistState'
    import { Logger } from '@Vue Storefront/core/lib/logger'
    import { TaskQueue } from '@Vue Storefront/core/lib/sync'
    import config from 'config'async function _serverLoad (customer_id: number) {
    const url = config.wishlist.pull_endpoint.replace('{{customer_id}}', customer_id) return TaskQueue.execute({
    url,
    payload: {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    mode: 'cors'
    },
    silent: true
    })
    .then(async task => {
    if (task.resultCode === 200) {
    // diffLog = await dispatch('merge', { serverItems: task.result, clientItems: getters.getCartItems, dryRun: dryRun, forceClientState: forceClientState })
    return task.result.map(x => x._source)
    } else {
    throw new Error('error retrieving wishlist')
    }
    })
    }async function _serverAddItem (customer_id: number, product_id: number) {
    const url = config.wishlist.additem_endpoint.replace('{{customer_id}}', customer_id).replace('{{product_id}}', product_id) return TaskQueue.execute({
    url,
    payload: {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    mode: 'cors'
    },
    silent: true
    })
    .then(async task => {
    if (task.resultCode === 200) {
    // diffLog = await dispatch('merge', { serverItems: task.result, clientItems: getters.getCartItems, dryRun: dryRun, forceClientState: forceClientState })
    return true
    } else {
    throw new Error('error adding item wishlist')
    }
    })
    }async function _serverDeleteItem (customer_id: number, product_id: number) {
    const url = config.wishlist.deleteitem_endpoint.replace('{{customer_id}}', customer_id).replace('{{product_id}}', product_id) return TaskQueue.execute({
    url,
    payload: {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' },
    mode: 'cors'
    },
    silent: true
    })
    .then(async task => {
    if (task.resultCode === 200) {
    // diffLog = await dispatch('merge', { serverItems: task.result, clientItems: getters.getCartItems, dryRun: dryRun, forceClientState: forceClientState })
    return true
    } else {
    throw new Error('error deleting item wishlist')
    }
    })
    }const actions: ActionTree<WishlistState, RootState> = {
    clear (context) {
    context.commit(types.WISH_LOAD_WISH, [])
    },
    async load ({ commit, getters, rootState, rootGetters }, force: boolean = false) {
    if (!force && getters.isWishlistLoaded) return
    commit(types.SET_WISHLIST_LOADED) Vue.prototype.$db.wishlistCollection.getItem('current-wishlist', (err, storedItems) => {
    if (err) throw new Error(err)
    commit(types.WISH_LOAD_WISH, storedItems)
    Logger.info ('Wishlist state loaded from browser cache. ', 'cache', storedItems)()
    })
    if (rootGetters['user/isLoggedIn']) {
    const storedItems = await _serverLoad(rootState.user.current.id)
    commit(types.WISH_LOAD_WISH, storedItems)
    Logger.info ('Wishlist state loaded from server. ', 'server', storedItems)()
    }
    },
    async addItem ({ commit, rootGetters, rootState }, product) {
    commit(types.WISH_ADD_ITEM, { product })
    rootStore.dispatch('notification/spawnNotification', {
    type: 'success',
    message: i18n.t('Product {productName} has been added to wishlist!', { productName: htmlDecode(product.name) }),
    action1: { label: i18n.t('OK') }
    })
    if (rootGetters['user/isLoggedIn']) {
    await _serverAddItem(rootState.user.current.id, product.id)
    Logger.info ('Wishlist product added to server. ', 'server', product)()
    }
    },
    async removeItem ({ commit, rootGetters, rootState }, product) {
    commit(types.WISH_DEL_ITEM, { product })
    rootStore.dispatch('notification/spawnNotification', {
    type: 'success',
    message: i18n.t('Product {productName} has been removed from wishlit!', { productName: htmlDecode(product.name) }),
    action1: { label: i18n.t('OK') }
    })
    if (rootGetters['user/isLoggedIn']) {
    await _serverDeleteItem(rootState.user.current.id, product.id)
    Logger.info ('Wishlist product deleted from server. ', 'server', product)()
    }
    }
    }
    export default actions
    I am facing HTTP ERROR undefined" on api call on adding product to wishlistWhat you guys think , how we can fix this one ?