@apollo-elements/rollup-plugin-graphql

Import GraphQL Documents in your Modules.

import { ApolloQuery, html } from '@apollo-elements/lit-apollo';
import LaunchesQuery from './Launches.query.graphql';

import { LaunchesQueryData as Data, LaunchesQueryVariables as Variables } from '../codegen';

class LaunchesElement extends ApolloQuery<Data, Variables> {
  query = LaunchesQuery;

  formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });

  render() {
    const names =
      (this.data?.launches ?? []).map(x => x.mission_name);

    return html`
      <p ?hidden="${this.loading}">
        ${this.formatter.format(names)} recently launched!!
      </p>
    `
  }
}

Installation

npm i -D @apollo-elements/rollup-plugin-graphql

yarn add -D @apollo-elements/rollup-plugin-graphql

Usage with Rollup

import { rollup } from 'rollup';
import graphql from '@apollo-elements/rollup-plugin-graphql';

export default {
  input: 'main.js',
  plugins: [
    graphql()
  ]
}

Usage with @web/dev-server

import { fromRollup } from '@web/dev-server-rollup';
import graphqlRollup from '@apollo-elements/rollup-plugin-graphql';

const graphql = fromRollup(graphqlRollup);

export default {
  mimeTypes: {
    '**/*.graphql': 'js;
  },
  plugins: [
    graphql()
  ]
}

Acknowledgements

This is based on the excellent graphql-mini-transforms from Shopify. Prior art in rollup-plugin-graphl by Kamil Kisiela.

Why?

This plugin reduces bundle sizes by exporting simple JSON.parse-d objects.

See apollographql/graphql-tag#249