>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3536124. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !1306 >>> <h3 id="overview">Overview</h3> <p>The <a href="https://www.drupal.org/project/api_client">Drupal API Client (<code>@drupal-api-client/json-api-client</code>)</a> is bundled for use in code components (&mdash; added in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3526297" title="Status: Closed (fixed)">#3526297: Add way to view fetch results inside code editor</a></span>).</p> <p>Code component authors can use it the following way:</p> <pre>import { JsonApiClient } from "@drupal-api-client/json-api-client";<br>const client = new JsonApiClient(baseUrl, options);</pre><p>There is already <a href="https://git.drupalcode.org/project/experience_builder/-/blob/15c954b11b479613b52d7c154a9f5a1393fe76d3/ui/lib/astro-hydration/src/lib/jsonapi-client.ts">wrapper code</a> added which tries to populate <code>baseUrl</code> using the value of <code>window.location.origin</code>, and also configures <a href="https://www.npmjs.com/package/jsona">Jsona</a> as <a href="https://project.pages.drupalcode.org/api_client/api/drupal-api-client/api-client/type-aliases/apiclientoptions/#serializer">the <code>serializer</code> in <code>options</code></a>.</p> <p>We need to address the followings:</p> <ol> <li>Reading the value of <code>window.location.origin</code> for <code>baseUrl</code> doesn't always work.</li> <li>The default base path the JSON:API module uses can be changed from <code>/jsonapi</code> in a service parameter.</li> </ol> <p>The goal is to allow code component authors to write the following, without passing anything in the class constructor:</p> <pre>import { JsonApiClient } from "@drupal-api-client/json-api-client";<br>const client = new JsonApiClient();</pre><h3 id="proposed-resolution">Proposed resolution</h3> <ol> <li>Instead of using the value of <code>window.location.origin</code> for <code>baseUrl</code>, use the data provided by the backend since <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3531249" title="Status: Closed (fixed)">#3531249: Populate data in `drupalSettings` to enable simple use cases in dynamic code components</a></span>.</li> <li>Pass relevant JSON:API module config and service parameters following the mechanism from <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3531249" title="Status: Closed (fixed)">#3531249: Populate data in `drupalSettings` to enable simple use cases in dynamic code components</a></span>, make it conditional on the use of <code>@drupal-api-client/json-api-client</code> in the JS code.</li> <li>Update our <a href="https://git.drupalcode.org/project/experience_builder/-/blob/15c954b11b479613b52d7c154a9f5a1393fe76d3/ui/lib/astro-hydration/src/lib/jsonapi-client.ts">bundled wrapper of <code>@drupal-api-client/json-api-client</code></a> to allow instantiating the <code>JsonApiClient()</code> class without any parameters, and have everything set up properly.</li> <li>Update our <a href="https://git.drupalcode.org/project/experience_builder/-/blob/1e5e9f54e15d1ca145c6935f109b6a2eb0f077cd/ui/src/features/code-editor/starterComponentTemplate.ts">starter component template</a> or the appropriate documentation file if <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3535089" title="Status: Closed (fixed)">#3535089: Move code component starter template documentation from inline comments to online docs </a></span> lands first.</li> </ol> <h3 id="ui-changes">User interface changes</h3> <p>n/a</p> > Related issue: [Issue #3526297](https://www.drupal.org/node/3526297) > Related issue: [Issue #3531249](https://www.drupal.org/node/3531249) > Related issue: [Issue #3547260](https://www.drupal.org/node/3547260)