-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of github.com:apollographql/graphql-tag
- Loading branch information
Showing
7 changed files
with
397 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,11 +3,13 @@ | |
[![Build Status](https://travis-ci.org/apollographql/graphql-tag.svg?branch=master)](https://travis-ci.org/apollographql/graphql-tag) | ||
[![Get on Slack](https://img.shields.io/badge/slack-join-orange.svg)](http://www.apollodata.com/#slack) | ||
|
||
GraphQL printing and parsing with bundled dependencies. Includes: | ||
Helpful utilities for parsing GraphQL queries. Includes: | ||
|
||
- `gql` A JavaScript template literal tag that parses GraphQL query strings into the standard GraphQL AST. | ||
- `/loader` A webpack loader to preprocess queries | ||
|
||
`graphql-tag` uses [the reference `graphql` library](https://github.com/graphql/graphql-js) under the hood as a peer dependency, so in addition to installing this module, you'll also have to install `graphql-js`. | ||
|
||
### gql | ||
|
||
This is a template literal tag you can use to concisely write a GraphQL query that is parsed into the standard GraphQL AST: | ||
|
@@ -62,9 +64,35 @@ That's where this package comes in - it lets you write your queries with [ES2015 | |
|
||
This package only has one feature - it caches previous parse results in a simple dictionary. This means that if you call the tag on the same query multiple times, it doesn't waste time parsing it again. It also means you can use `===` to compare queries to check if they are identical. | ||
|
||
### Webpack preprocessing | ||
### Babel preprocessing | ||
|
||
GraphQL queries can be compiled at build time using [babel-plugin-graphql-tag](https://github.com/gajus/babel-plugin-graphql-tag). Pre-compiling queries decreases the script initialization time and reduces the bundle size by potentially removing the need for `graphql-tag` at runtime. | ||
|
||
#### TypeScript | ||
Try this custom transformer to pre-compile your GraphQL queries in TypeScript: [ts-transform-graphql-tag](https://github.com/firede/ts-transform-graphql-tag). | ||
|
||
#### React Native, Next.js | ||
|
||
This package also includes a [webpack loader](https://webpack.github.io/docs/loaders.html). There are many benefits over this approach, which saves GraphQL ASTs processing time on client-side and enable queries to be separated from script over `.graphql` files. | ||
Additionally, in certain situations, preprocessing queries via the webpack loader is not possible. [babel-plugin-inline-import-graphql-ast](https://www.npmjs.com/package/babel-plugin-inline-import-graphql-ast) will allow one to import graphql files directly into your JavaScript by preprocessing GraphQL queries into ASTs at compile-time. | ||
|
||
E.g.: | ||
```javascript | ||
import myImportedQuery from './productsQuery.graphql' | ||
|
||
class ProductsPage extends React.Component { | ||
... | ||
} | ||
``` | ||
|
||
#### Create-React-App | ||
|
||
`[email protected]` will [support the ability to preprocess queries](https://github.com/facebook/create-react-app/pull/3909) using `graphql-tag/loader` without the need to eject. | ||
|
||
If you're using an older version of `create-react-app`, check out [react-app-rewire-inline-import-graphql-ast](https://www.npmjs.com/package/react-app-rewire-inline-import-graphql-ast) to preprocess queries without needing to eject. | ||
|
||
### Webpack preprocessing with `graphql-tag/loader` | ||
|
||
This package also includes a [webpack loader](https://webpack.js.org/concepts/loaders). There are many benefits over this approach, which saves GraphQL ASTs processing time on client-side and enable queries to be separated from script over `.graphql` files. | ||
|
||
```js | ||
loaders: [ | ||
|
@@ -88,3 +116,33 @@ console.log(query); | |
``` | ||
|
||
Testing environments that don't support Webpack require additional configuration. For [Jest](https://facebook.github.io/jest/) use [jest-transform-graphql](https://github.com/remind101/jest-transform-graphql). | ||
|
||
#### Support for multiple operations | ||
|
||
With the webpack loader, you can also import operations by name: | ||
|
||
In a file called `query.gql`: | ||
```graphql | ||
query MyQuery1 { | ||
... | ||
} | ||
|
||
query MyQuery2 { | ||
... | ||
} | ||
``` | ||
|
||
And in your JavaScript: | ||
```javascript | ||
import { MyQuery1, MyQuery2 } from 'query.gql' | ||
``` | ||
|
||
### Warnings | ||
|
||
This package will emit a warning if you have multiple fragments of the same name. You can disable this with: | ||
|
||
```js | ||
import { disableFragmentWarnings } from 'graphql-tag'; | ||
|
||
disableFragmentWarnings() | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
export default function gql(literals: any, ...placeholders: any[]): any; | ||
import { DocumentNode } from 'graphql'; | ||
|
||
export default function gql(template: TemplateStringsArray, ...substitutions: any[]): DocumentNode; | ||
export function resetCaches(): void; | ||
export function disableFragmentWarnings(): void; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.