Alokai•11mo ago

storefront-nuxt3-magento2 integration

I have installed in my local machine storefront-nuxt3-boilerplate and then implement a custom magento integration following the docs instruction. After yarn dev I have this good feedback

web:dev: Nuxi 3.6.5
web:dev: Nuxt 3.6.5 with Nitro 2.5.2
server:dev: ℹ Middleware starting....
server:dev: ℹ Loading integrations...
server:dev: ℹ - Loading: magento @vue-storefront/magento-api/server
server:dev: ✔ - Integration: magento init function Start!
server:dev: ✔ - Integration: magento init function Done!
server:dev: ℹ - Loading: magento extension: tokenExtension
server:dev: ✔ - Integration: magento loaded!
server:dev: ✔ Integrations loaded!
server:dev: ✔ Middleware created!
server:dev: Middleware started: http://localhost:8181
web:dev: 
web:dev:   > Local:    http://localhost:3000/ 
web:dev:   > Network:  http://10.10.30.146:3000/
web:dev:

web:dev: Nuxi 3.6.5
web:dev: Nuxt 3.6.5 with Nitro 2.5.2
server:dev: ℹ Middleware starting....
server:dev: ℹ Loading integrations...
server:dev: ℹ - Loading: magento @vue-storefront/magento-api/server
server:dev: ✔ - Integration: magento init function Start!
server:dev: ✔ - Integration: magento init function Done!
server:dev: ℹ - Loading: magento extension: tokenExtension
server:dev: ✔ - Integration: magento loaded!
server:dev: ✔ Integrations loaded!
server:dev: ✔ Middleware created!
server:dev: Middleware started: http://localhost:8181
web:dev: 
web:dev:   > Local:    http://localhost:3000/ 
web:dev:   > Network:  http://10.10.30.146:3000/
web:dev:

So after I try to fetch some data, for example the categoryList. So I put this code for the click of the button on BrowseProducts of TopNavigationBar.

const { data } = await useAsyncData(async () => await sdk.magento.categoryList({}))

const res = computed(() => data?.value?.data?.categories?.items?.[0]?.children)

function checkFetchDataFromMagento() {
  console.log('check fetch data from magento')
  console.log(res)
}

const { data } = await useAsyncData(async () => await sdk.magento.categoryList({}))

const res = computed(() => data?.value?.data?.categories?.items?.[0]?.children)

function checkFetchDataFromMagento() {
  console.log('check fetch data from magento')
  console.log(res)
}

The problem is that with GET Request at the url http://localhost:8181/magento/categoryList?body=[%7B%7D,null,null] I get back 404, as you can see in the photo. On the other hand, the same API Request with POST method, I get back exactly the data I need. Could anyone explain this paradox and how I could solve it?

11 Replies

rohrig•11mo ago

Hi @kantro 👋 , can you show me your magento integration config on the middleware?

kantroOP•11mo ago

Hi @rohrig . Yes of course. I put the content of middleware.config.js below. (I have borrow some ideas from project nuxt3-magento-sdk-storefront )

import dotenv from 'dotenv';
dotenv.config();

const cookieNames = {
  currencyCookieName: 'vsf-currency',
  countryCookieName: 'vsf-country',
  localeCookieName: 'vsf-locale',
  cartCookieName: 'vsf-cart',
  customerCookieName: 'vsf-customer',
  storeCookieName: 'vsf-store',
  messageCookieName: 'vsf-message'
};

export const integrations = {
    magento: {
      location: '@vue-storefront/magento-api/server',
      configuration: {
        api: process.env.VSF_MAGENTO_GRAPHQL_URL,
        cookies: {
          ...cookieNames,
        },
        cookiesDefaultOpts: {
          httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,
          secure: process.env.VSF_COOKIE_SECURE || false,
          sameSite: process.env.VSF_COOKIE_SAME_SITE || 'lax',
          path: process.env.VSF_COOKIE_PATH || '/',
        },
        defaultStore: 'default',
        customApolloHttpLinkOptions: {
          useGETForQueries: true,
        },
        magentoBaseUrl: process.env.VSF_MAGENTO_BASE_URL,
        magentoApiEndpoint: process.env.VSF_MAGENTO_GRAPHQL_URL,
        imageProvider: process.env.NUXT_IMAGE_PROVIDER,
        recaptcha: {
          isEnabled: process.env.VSF_RECAPTCHA_ENABLED === 'true',
          sitekey: process.env.VSF_RECAPTCHA_SITE_KEY,
          secretkey: process.env.VSF_RECAPTCHA_SECRET_KEY,
          version: process.env.VSF_RECAPTCHA_VERSION,
          score: process.env.VSF_RECAPTCHA_MIN_SCORE,
        },
        customer: {
          customer_create_account_confirm: true,
        },
      },
    }
    /* VSF integration config */
};

import dotenv from 'dotenv';
dotenv.config();

const cookieNames = {
  currencyCookieName: 'vsf-currency',
  countryCookieName: 'vsf-country',
  localeCookieName: 'vsf-locale',
  cartCookieName: 'vsf-cart',
  customerCookieName: 'vsf-customer',
  storeCookieName: 'vsf-store',
  messageCookieName: 'vsf-message'
};

export const integrations = {
    magento: {
      location: '@vue-storefront/magento-api/server',
      configuration: {
        api: process.env.VSF_MAGENTO_GRAPHQL_URL,
        cookies: {
          ...cookieNames,
        },
        cookiesDefaultOpts: {
          httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,
          secure: process.env.VSF_COOKIE_SECURE || false,
          sameSite: process.env.VSF_COOKIE_SAME_SITE || 'lax',
          path: process.env.VSF_COOKIE_PATH || '/',
        },
        defaultStore: 'default',
        customApolloHttpLinkOptions: {
          useGETForQueries: true,
        },
        magentoBaseUrl: process.env.VSF_MAGENTO_BASE_URL,
        magentoApiEndpoint: process.env.VSF_MAGENTO_GRAPHQL_URL,
        imageProvider: process.env.NUXT_IMAGE_PROVIDER,
        recaptcha: {
          isEnabled: process.env.VSF_RECAPTCHA_ENABLED === 'true',
          sitekey: process.env.VSF_RECAPTCHA_SITE_KEY,
          secretkey: process.env.VSF_RECAPTCHA_SECRET_KEY,
          version: process.env.VSF_RECAPTCHA_VERSION,
          score: process.env.VSF_RECAPTCHA_MIN_SCORE,
        },
        customer: {
          customer_create_account_confirm: true,
        },
      },
    }
    /* VSF integration config */
};

Also I tried to change the useGETForQueries to false but the behavior was exactly the same.

GitHub

GitHub - TidycodeIT/nuxt3-magento-sdk-storefront: A boilerplate sto...

A boilerplate storefront build with the Vue Storefront Magento 2 Integration and Storefront UI - GitHub - TidycodeIT/nuxt3-magento-sdk-storefront: A boilerplate storefront build with the Vue Storef...

rohrig•11mo ago

Thanks. I'll see what I can find.

rohrig•11mo ago

Please upgrade the "@vue-storefront/magento-api": "^2.0.0", to at least version 2.2.0 this is when the get functionality was introduced to the magento integration according to the changelog here: https://docs.vuestorefront.io/integrations/magento/reference/changelogs/vue-storefront-magento-api

Vue Storefront Docs

@vue-storefront/magento-api

Frontend as a Service for Composable Commerce

kantroOP•11mo ago

in package.json file, I found my version is:

"@vue-storefront/magento-api": "^2.4.3",

Should I downgrade? @rohrig hi, I have tried both version "@vue-storefront/magento-api": "2.2.0" and 2.3.0 but the Response is the same. Could you give me a link of this commits so I can see the code?

rohrig•11mo ago

what middleware version do you have? @kantro ☝️

kantroOP•11mo ago

@rohrig "@vue-storefront/middleware": "3.4.0",

rohrig•11mo ago

I think that's the problem. you need at least 3.5 for get request, I think. let me confirm.

rohrig•11mo ago

https://docs.vuestorefront.io/middleware/reference/change-log

Vue Storefront Docs

Change log

Frontend as a Service for Composable Commerce

kantroOP•11mo ago

it looks very ok. Thank you

Gaming

Programming

storefront-nuxt3-magento2 integration