Skip to content

Commit

Permalink
Add section for create-react-app to README (#145)
Browse files Browse the repository at this point in the history
* Add section for create-react-app

* Update README.md

* Update README.md
  • Loading branch information
detrohutt authored and jnwng committed Feb 7, 2018
1 parent 70a27e5 commit 8b34c3a
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,24 @@ GraphQL queries can be compiled at build time using [babel-plugin-graphql-tag](h
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

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.
Expand Down

0 comments on commit 8b34c3a

Please sign in to comment.