materio-d8/web/themes/custom/materiotheme/vuejs/store/modules/pages.js

import REST from 'vuejs/api/rest-axios'

import MGQ from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import productsGQL from 'vuejs/api/gql/products.fragment.gql'

export default {
  namespaced: true,

  // initial state
  state: {
    products_ids: [],
    products: []
  },

  // getters
  getters: {},

  // mutations
  mutations: {
    setProductsIds (state, ids) {
      state.products_ids = ids
    },
    setProducts (state, p) {
      state.products = p
    }
  },

  // actions
  actions: {
    getProducts ({ dispatch, commit, state }) {
      dispatch('loadProductsIds')
    },
    loadProductsIds ({ dispatch, commit, state }) {
      REST.get('/pricing_rest?_format=json', {})
        .then(({ data }) => {
          console.log('getProducts REST: data', data)
          const ids = []
          for (let i = 0; i < data.length; i++) {
            ids.push(data[i].product_id)
          }
          commit('setProductsIds', ids)
          dispatch('loadProducts')
        })
        .catch((error) => {
          console.warn('Issue with pricing', error)
          Promise.reject(error)
        })
    },
    loadProducts ({ dispatch, commit, state }) {
      const ast = gql`{
        products(ids: [${state.products_ids}], lang: "${drupalDecoupled.lang_code}") {
          ...ProductsFields
        }
      }
      ${productsGQL}
      `
      MGQ.post('', { query: print(ast) })
        .then((resp) => {
          console.log('loadProductsGQL resp', resp)
          commit('setProducts', resp.data.data.products)
        })
        .catch(error => {
          console.warn('Issue with loadProducts', error)
          Promise.reject(error)
        })
    }

  }
}