babel-plugin-graphql-js-client-transform

Babel plugin for transforming raw GraphQL queries into graphql-js-client query builder syntax

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-graphql-js-client-transform
5131.1.16 years ago6 years agoMinified + gzip package size for babel-plugin-graphql-js-client-transform in KB

Readme

babel-plugin-graphql-js-client-transform
This Babel plugin will transform any tagged raw GraphQL query to Shopify/graphql-js-client query builder syntax.

Table Of Contents

Installation

$ yarn add babel-plugin-graphql-js-client-transform

In your .babelrc

{
  "plugins": [
    "graphql-js-client-transform"
  ]
}

Usage

// Finds template literals tagged with gql
import {gql} from 'babel-plugin-graphql-js-client-transform';

// Finds template literals tagged with customTagName
import {gql as customTagName} from 'babel-plugin-graphql-js-client-transform';
The plugin will pick up any template literals tagged with the imported gql function. Do not reassign the function to another variable after it has been imported.
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

const newTag = gql;

newTag(client)`...`; // Don't do this. This template literal won't be transformed.

An instance of Shopify/graphql-js-client must be supplied to the tag.

Examples

The following are example usages.

Example 1

Convert a simple query.
Source Code
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

client.send(gql(client)`
  query {
    shop {
      name
    }
  }
`);
Transformed Code
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

const _document = client.document(); // Creates a document to store the query
_document.addQuery((root) => {
  root.add('shop', (shop) => {
     shop.add('name');
  });
});

client.send(_document);

Example 2

The query can also be stored inside a variable instead of being sent directly.
Source Code
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

const query = gql(client)`
  query {
    shop {
      name
    }
  }
`;

client.send(query);
Transformed Code
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

const _document = client.document(); // Creates a document to store the query
_document.addQuery((root) => {
  root.add('shop', (shop) => {
     shop.add('name');
  });
});

const query = _document;

client.send(query);

License

MIT, see LICENSE.md for details.