1. Invoke component interop
<![CDATA[<script src="../component-interop.js"
data-stage="auto"
data-manifest="sol-components.manifest.json pod-os.manifest.json" // load sol-component manifest
data-components="@pod-os/elements" // do or don't load sol-component compents
data-attributes="data-from-query" // opt in to swc's data-from-query attribute
></script>]]>
2. Add **data-from-query** and related attributes to any element, you're done
<![CDATA[<pos-app>
<ul data-from-query
data-endpoint="https://dbpedia.org/sparql"
data-sparql="SELECT DISTINCT ?name WHERE {
?p <http://dbpedia.org/ontology/award> <http://dbpedia.org/resource/Turing_Award> ;
<http://www.w3.org/2000/01/rdf-schema#label> ?name .
FILTER(lang(?name) = 'en')
} ORDER BY ?name LIMIT 5"
></ul>
</pos-app>]]>
Or a triple **pattern** — with no endpoint it reads the SHARED store, live
<![CDATA[<!-- No `endpoint`: the pattern matches the shared rdflib graph (what PodOS,
solid-logic, etc. populate) and RE-RUNS whenever a matching triple changes.
CURIEs (foaf:, rdfs:, …) are expanded for you. -->
<ul data-from-query
pattern="<https://timbl.solidcommunity.net/profile/card#me> foaf:name ?name"
></ul>]]>
This illustrates Data-from-query in a ul element. On a text element (an h1, span, etc.) it sets the element's text to the result. If you use it in a custom element, you can retrieve the data as a JSON object. See the Using data-from-query in a custom element.
Data-from-query has many other options (live shared-store triple patterns, stored queries, replaceable parameter queries, and more) see the Sol-Component sol-query documents.