https://github.com/apollo-elements/rollup-plugin-graphql
Import GraphQL Documents in your Modules
https://github.com/apollo-elements/rollup-plugin-graphql
graphql hacktoberfest optimization performance rollup rollup-plugin-graphql
Last synced: 3 months ago
JSON representation
Import GraphQL Documents in your Modules
- Host: GitHub
- URL: https://github.com/apollo-elements/rollup-plugin-graphql
- Owner: apollo-elements
- License: mit
- Created: 2020-09-23T08:28:26.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-11T11:37:18.000Z (over 3 years ago)
- Last Synced: 2024-05-21T07:27:59.584Z (about 1 year ago)
- Topics: graphql, hacktoberfest, optimization, performance, rollup, rollup-plugin-graphql
- Language: TypeScript
- Homepage:
- Size: 156 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @apollo-elements/rollup-plugin-graphql
[](https://github.com/apollo-elements/rollup-plugin-graphql/actions)
[](https://npm.im/@apollo-elements/rollup-plugin-graphql)
Import GraphQL Documents in your Modules.
```ts
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 {
query = LaunchesQuery;
formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
render() {
const names =
(this.data?.launches ?? []).map(x => x.mission_name);
return html`
${this.formatter.format(names)} recently launched!!
`
}
}
```
## Installation
```bash
npm i -D @apollo-elements/rollup-plugin-graphql
```
```bash
yarn add -D @apollo-elements/rollup-plugin-graphql
```
## Usage with Rollup
```js
import { rollup } from 'rollup';
import graphql from '@apollo-elements/rollup-plugin-graphql';
export default {
input: 'main.js',
plugins: [
graphql()
]
}
```
## Usage with `@web/dev-server`
```js
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`](https://github.com/Shopify/graphql-tools-web/tree/main/packages/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