Issues with Initial Setup for B2B Buyer Portal App

[komodoris]

Discussed in #192

^{Originally posted by komodoris December 17, 2024}
Hello,

I have some questions regarding the B2B Buyer Portal app GitHub Repo, we have
configured the pipeline to deploy on Heroku via Bitbucket. The app builds and runs, and I’ve followed the steps outlined in the Headless Guide,%20since%20this%20instance%20will%20only%20be%20used%20for%20headless%20operations) for the initial configuration.

Here are the current issues:

1. GraphQL Errors:
   The GraphQL payload is incomplete, missing store-id and store-hash.
   These are initialized as empty strings in apps/storefront/src/buyerPortal.ts and rely on a DOM element (script[data-storehash][data-channelid]) that I couldn’t locate in the project (nor is it dynamically injected).

Payload Sent:

{
     storefrontScript(
       storeHash: ""
       channelId:
       siteUrl: "https://igt-b2b-dev-aa1b02a2005d.herokuapp.com/"
     ) {
       script
       storeHash
       channelId
     }
   }

Response:

{
       "errors": [
           {
               "message": "Syntax Error: Expected Name, found ':'.",
               "locations": [
                   {
                       "line": 6,
                       "column": 20
                   }
               ]
           }
       ]
   }

2. Build Configuration:
   Modified vite.config.js to include index.html in the build, as it was excluded by default. However, the resulting index.html has some undefined references that may need review, and also added the data attributes for [data-storehash] and [data-channelid] containing my store hash and channel id from the environment, which I'm not sure is the correct approach.
3. Code Cleanup:
   To streamline our development and improve maintainability, we should remove unnecessary components and prioritize a clear configuration process for a headless implementation, which is still confusing, and which parts are only relevant for the non headless setup.

The deployed app can be found here. There you can look into the network tab and requests being made, including the graphql payload and response and other resources.