@rollup/plugin-graphql

What is @rollup/plugin-graphql?

@rollup/plugin-graphql is a Rollup plugin that allows you to import GraphQL files into your JavaScript or TypeScript projects. This can be particularly useful for bundling GraphQL schema or query files directly into your application, making it easier to manage and deploy GraphQL-related code.

What are @rollup/plugin-graphql's main functionalities?

Import GraphQL Files

This feature allows you to import GraphQL files directly into your JavaScript or TypeScript code. The imported schema or query can then be used within your application.

import schema from './schema.graphql';

console.log(schema);

Bundling GraphQL Files

This feature demonstrates how to use the @rollup/plugin-graphql to bundle GraphQL files along with your JavaScript code using Rollup. The plugin processes the GraphQL files and includes them in the final bundle.

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

const inputOptions = {
  input: 'src/index.js',
  plugins: [graphql()]
};
const outputOptions = {
  file: 'bundle.js',
  format: 'cjs'
};

async function build() {
  const bundle = await rollup(inputOptions);
  await bundle.write(outputOptions);
}

build();

Other packages similar to @rollup/plugin-graphql

graphql-tag

graphql-tag is a JavaScript template literal tag that parses GraphQL queries. It is commonly used with Apollo Client and other GraphQL clients. Unlike @rollup/plugin-graphql, graphql-tag does not handle file imports directly but focuses on parsing GraphQL queries from template literals.

graphql-import

graphql-import allows you to import .graphql files into your JavaScript or TypeScript code. It is similar to @rollup/plugin-graphql in that it helps manage GraphQL schema and query files, but it is not a Rollup plugin and does not handle bundling.

babel-plugin-import-graphql

babel-plugin-import-graphql is a Babel plugin that allows you to import GraphQL files into your JavaScript code. It is similar to @rollup/plugin-graphql but is designed to work with Babel instead of Rollup.

README

@rollup/plugin-graphql

🍣 A Rollup plugin which Converts .gql/.graphql(s) files to ES6 modules.

Requirements

This plugin requires an LTS Node version (v14.0.0+) and Rollup v1.20.0+.

Install

Using npm:

npm install @rollup/plugin-graphql --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import graphql from '@rollup/plugin-graphql';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [graphql()]
};

Then call rollup either via the CLI or the API.

With an accompanying file src/index.js, you can import GraphQL files or named queries/mutations:

// src/index.js

// import a GraphQL Document from a GraphQL file,
import schema from './schema.graphql';

// or import named Query/Mutation
import { BatmanQuery, JokerMutation } from './schema.graphql';

Fragments

Thanks to graphql-tag, fragments import is supported by using #import "...".

Given the following file heroFragment.graphql:

fragment HeroFragment on Hero {
  id
  name
}

You can import it like this:

#import "./heroFragment.graphql"

query AllHeroes {
  heros {
    ...HeroFragment
  }
}

Options

exclude

Type: String | Array[...String]
Default: null

A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.

include

Type: String | Array[...String]
Default: null

A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

Meta

CONTRIBUTING

LICENSE (MIT)