Building for Production

Since you can’t import Apollo client directly into the browser, you’ll need transpile and bundle the @apollo/client/core package to use it in your app. We recommend using Rollup for this. While you’re at it, you can also take some time to add performance enhancements like minification and code splitting to your rollup config.

A basic rollup.config.js that you can work from looks like this:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  // main entry point which loads the client and the app-shell components
  input: 'main.js',

  output: [{
    dir: 'build',
    format: 'es',
    sourcemap: true,
  }, {
    dir: 'build/nomodule',
    format: 'system',
    sourcemap: true,
  }],

  plugins: [
    resolve(),
    commonjs(),
  ]
}

You can use rollup-plugin-lit-css and @rollup/plugin-graphql to enhance the DX:

import litcss from 'rollup-plugin-lit-css';
import graphql from '@rollup/plugin-graphql';
// ...

export default {
  //...
  plugins: [
    // ...,
    graphql(),
    litcss(),
  ]
}

These plugins let you import CSS tagged-template literals and GraphQL files as JavaScript objects. With them, you can do fun tricks in your source modules:

<p>
  These techniques are less relevant to HTML components,
  so check out the other tabs.
</p>

import { HelloQuery } from './Hello.query.graphql';
import style from './hello-query.css';

class HelloWorld extends ApolloQuery {
  query = HelloQuery;

  static get styles() {
    return style;
  }
}

customElements.define('hello-world', HelloWorld);

import { ApolloQueryController } from '@apollo-elements/core';
import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { HelloQuery } from './Hello.query.graphql';
import style from './hello-query.css';

@customElement('hello-world')
class HelloWorld extends LitElement {
  query = new ApolloQueryController(this, HelloQuery);

  static styles = style;
}

import { FASTElement, customElement } from '@microsoft/fast-element';
import { ApolloQueryBehavior } from '@apollo-elements/fast';
import { HelloQuery } from './Hello.query.graphql';

@customElement({ name: 'hello-world' })
class HelloWorld extends FASTElement {
  query = new ApolloQueryBehavior(this, HelloQuery);
}

import { useQuery, component, html } from '@apollo-elements/haunted';
import { HelloQuery } from './Hello.query.graphql';

function HelloWorld() {
  const { data } = useQuery(HelloQuery);
}

customElements.define('hello-world', component(HelloWorld));

import { define, query } from '@apollo-elements/hybrids';
import { HelloQuery } from './Hello.query.graphql';

define('hello-world', {
  query: query(HelloQuery),
});

JavaScript Features

Apollo Elements generally targets modern browsers up to ECMAScript version 2022, with features like Array#flatMap and Object#fromEntries. If you need to support to older browsers, we recommend a polyfill, and possibly a compilation step.