>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3276122. --> Reported by: [brianperry](https://www.drupal.org/user/2304500) Related to !34 !29 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The <a href="https://www.drupal.org/project/gdwc/issues/3241191">issue to create a POC card component</a> has evolved into experimenting with how this library could have a reusable approach to sourcing data from Drupal and making that application state available to many components. That in turn led to a sizable detour into the creation of the <a href="https://www.drupal.org/project/drupal_state">Drupal State project</a>. </p> <p>With Drupal State available to source data and manage state, two additional components were created to take advantage of it.</p> <p>gdwc-client - this component creates an instance of the Drupal State store that can retrieve data from Drupal.<br> gdwc-query - this component requests a specific object via the gdwc-client, and then makes that object available to any child component in the gdwc namespace.</p> <p>Recently @andy-blum offered to spend some time experimenting with this project with the intent of creating additional components. He created <a href="https://codepen.io/andy-blum/pen/WNddQQL">the following codepen</a> which demonstrates an alternate approach to a component that provides Drupal data to child components.</p> <p>The more I thought about this approach, the more I felt it had advantages over the previous client/query implementation.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>I've been experimenting with something that combines the two approaches. Consider the example markup:</p> <pre>&lt;gdwc-store apiBase="https://dev-ds-demo.pantheonsite.io"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;gdwc-provider<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; objectName="node--recipe"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; include="field_media_image.field_media_image"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :host {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: grid;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns: 1fr 1fr 1fr;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid-gap: 20px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/style&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;gdwc-card<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; headline="{{ title }}"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imgSrc="https://dev-ds-demo.pantheonsite.io/{{ field_media_image.field_media_image.uri.url }}"<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;{{ field_summary.processed }}<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/gdwc-card&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/template&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/gdwc-provider&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/gdwc-store&gt;</pre><p>gdwc-store replaces the gdwc-client component (this seemed like a good opportunity to improve the naming) This creates an instance of a Drupal State store.</p> <p>gdwc-provider has access to the parent store and can retrieve specified objects. Multiple providers can be within one store.</p> <p>The provider then has a child template. This template's scope has access to the data that is returned from the store, and any data can be referenced in the template within double braces - for example {{ field_summary.processed }} You'll note that this template can contain any elements - either standard html elements, or additional web components. Also, if the provider returns an array of results, it will iterate over the template for all results.</p> <p>My hope is that this combines the simplified data sourcing that Drupal State can provide, along with the flexibility of the template based approach that @andy-blum outlined. It also requires no special code in the template components, which would allow it to work with html, gdwc-components that haven't been created yet, or even other web component libraries.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>* Remove gdwc-client and gdwc-query elements<br> * Implement gdwc-store and gdwc-provider as outlined above.<br> * Update storybook examples to demonstrate.</p> <h3 id="summary-api-changes">API changes</h3> <p>gdwc-client and gdwc-query elements will be replaced.</p>