-
Notifications
You must be signed in to change notification settings - Fork 177
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add section for create-react-app to README (#145)
* Add section for create-react-app * Update README.md * Update README.md
- Loading branch information
Showing
1 changed file
with
8 additions
and
1 deletion.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. | ||
|