@rizedr/babel-plugin-graphql-js-client-transform

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
• Usage
• Examples
• License

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.