@apollo-elements/rollup-plugin-graphql
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

@apollo-elements/rollup-plugin-graphql

Actions Status npm

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 https://github.com/apollographql/graphql-tag/issues/249

Readme

Keywords

Package Sidebar

Install

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

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

20 kB

Total Files

11

Last publish

Collaborators

  • bennyp