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

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

$3

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

Usage

`js
// 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.
`js
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
` js
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

client.send(gql(client)
query {
shop {
name
}
}
);
`

##### Transformed Code
`js
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

`js
import {gql} from 'babel-plugin-graphql-js-client-transform';

...

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

client.send(query);
`

##### Transformed Code
`js
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.