Fetch store name from the GraphQL server at compile time.

[revanth0212]

Is your feature request related to a problem? Please describe.
This is related to #1595. As part of that PR, we have created a global variable called STORE_NAME that can be added to the bundle at compile time using the Webpack Define plugin. Instead of hardcoding it in Define plugin, can we request that from the GraphQL server and then insert that into the global object just like the Define plugin?

Describe the solution you'd like

• Modify the getStoreConfigData.graphql file to include store_name, as per the StoreConfig schema.
• Modify the getAvailableStoresConfigData.graphql to also include the store_name.
• Using the data from these queries, if STORE*VIEW_CODE environment variable is used, use the store*name value from the corresponding availableStore. If not, use the default value returned by the getStoreConfigData query.
• Update jest config with whatever the sample data store name is from venia.

Describe alternatives you've considered
We can expect the partner developers to simply change the hardcoded string in webpack's Define plugin.

Please let us know what packages this feature is in regards to:

• <x] venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• [ > upward-spec

Test Plan:

• On first load (clear cache) of home page route, url will be displayed initially as title in browser.
• After a short time, title will update to contain view name.
• Refresh page. Title should contain correct view name (from cache). You should not see url in title.
• Repeat above steps for:
  • CMS page
  • Category page
  • Product page
  • Account Information page
  • Address Book page
  • Communications page
  • Reset Password page
  • Order History page
  • Cart page
  • Checkout page
  • Order confirmation page (refresh will go back to cart page)
• Run MFTF

[supernova-at]

Check the Risks & Caveats section of #1739 for issues we may run into when fetching GraphQL data at build time.

That said, "store name" should theoretically not change all that often 😄

[zetlen]

We already have a relatively new plugin which gets the media URL from GraphQL at build time. Who wants to extend it?

You'll need:

• Some experience with NodeJS and Webpack plugins
• Connect a debugger (like Chrome or VSCode) to the running Node process
• The Webpack configuration API open in another tab
• A GraphiQL environment (or the GraphQL playground!) to test GraphQL queries

[awilcoxa]

removing help wanted and needs additional core investigation

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1463) is successfully created for this issue.

[revanth0212]

I have checked both the queries and both seem to be returning the store view name instead of the name of the store, for instance, I was expecting it would return Venia but it was in fact returning Default Store View.

Here are the results of both the queries:

getStoreConfigData.graphql

{
  id: 1,
  code: "default",
  locale: "en_US",
  secure_base_media_url: "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/",
  store_name: "Default Store View",
}

getAvailableStoresConfigData.graphql

[
  {
    code: "default",
    id: 1,
    secure_base_media_url: "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/",
    store_code: "default",
    store_name: "Default Store View",
    default_display_currency_code: "USD",
  },
  {
    code: "fr",
    id: 2,
    secure_base_media_url: "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/",
    store_code: "fr",
    store_name: "French Store View",
    default_display_currency_code: "EUR",
  },
]

Is this expected?

[sirugh]

Is this expected?

Yes. You expect Venia because we hard-coded it. What you're actually seeing now is the real sample data.