• Public
  • Public/Protected
  • All

📜 Inline Query Scripts

You can provide a GraphQL query string in your markup by appending a GraphQL script element to your connected element.

Say you had a <greet-me> element which extends ApolloQuery.

import { ApolloQuery, customElement } from '@apollo-elements/lit-apollo';

class GreetMe extends ApolloQuery<{ name: string, greeting: string }, null> {
  render() {
    return html`
      <p>${this.data?.greeting ?? 'Hello'}, ${this.data?.name ?? 'friend'}</p>

You can add it to your page like so, and it will start querying.

  <script type="application/graphql">
    query Greeting {
      greeting {

No Base Class

You can use Apollo Elements without subclassing. Import @apollo-elements/polymer/apollo-query and add an <apollo-query> element to your page with a <script type="application/graphql"> as its first child. The element will query as soon as it upgrades, and will fire data-changed or error-changed events. If your query has arguments, assign them to the <apollo-query> element's variables property.

Despite the name, these components don't import from the Polymer library, rather they extend HTMLElement, so they won't unduly affect your bundle sizes.

<apollo-query id="hello">
  <script type="application/graphql">
  query HelloQuery {
    helloWorld {

<output id="output"></output>

<script type="module">
  import "@apollo-elements/polymer/apollo-query";
  hello.addEventListener('data-changed', ({ detail: { value } }) => {
    if (!value || !value.helloWorld) return;
    const greeting = value.helloWorld.greeting || 'Hello';
    const name = value.helloWorld.name || 'Friend';
    output.textContent = `${greeting}, ${name}!`;