Skip to content

Commit 8b34c3a

Browse files
detrohuttjnwng
authored andcommitted
Add section for create-react-app to README (#145)
* Add section for create-react-app * Update README.md * Update README.md
1 parent 70a27e5 commit 8b34c3a

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,24 @@ GraphQL queries can be compiled at build time using [babel-plugin-graphql-tag](h
7272
Try this custom transformer to pre-compile your GraphQL queries in TypeScript: [ts-transform-graphql-tag](https://github.com/firede/ts-transform-graphql-tag).
7373

7474
#### React Native, Next.js
75+
7576
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.
7677

7778
E.g.:
7879
```javascript
7980
import myImportedQuery from './productsQuery.graphql'
80-
81+
8182
class ProductsPage extends React.Component {
8283
...
8384
}
8485
```
8586

87+
#### Create-React-App
88+
89+
`[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.
90+
91+
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.
92+
8693
### Webpack preprocessing with `graphql-tag/loader`
8794

8895
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.

0 commit comments

Comments
 (0)