From 8b34c3ac6bc67165c114b0f0e6ddf4549312a2c4 Mon Sep 17 00:00:00 2001 From: Alexander Roberts Date: Wed, 7 Feb 2018 12:31:18 -0600 Subject: [PATCH] Add section for create-react-app to README (#145) * Add section for create-react-app * Update README.md * Update README.md --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f8432d7f..b5b46a0f 100644 --- a/README.md +++ b/README.md @@ -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 + +`create-react-app@2.0.0` 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.