diff --git a/packages/react-scripts/config/jest/graphqlTransform.js b/packages/react-scripts/config/jest/graphqlTransform.js deleted file mode 100644 index 5b70f07d6f2..00000000000 --- a/packages/react-scripts/config/jest/graphqlTransform.js +++ /dev/null @@ -1,18 +0,0 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2018-present, Facebook, Inc. - * Copyright (c) 2016 Remind - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -// @remove-on-eject-end -'use strict'; - -const loader = require('graphql-tag/loader'); - -module.exports = { - process(src) { - return loader.call({ cacheable() {} }, src); - }, -}; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 4d4291aa1f8..d92cf597e7d 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -352,11 +352,6 @@ module.exports = { 'sass-loader' ), }, - // The GraphQL loader preprocesses GraphQL queries in .graphql files. - { - test: /\.(graphql)$/, - loader: 'graphql-tag/loader', - }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 50936389bce..6bd24c06401 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -391,11 +391,6 @@ module.exports = { 'sass-loader' ), }, - // The GraphQL loader preprocesses GraphQL queries in .graphql files. - { - test: /\.(graphql)$/, - loader: 'graphql-tag/loader', - }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader doesn't use a "test" so it will catch all modules diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index ebd830dfaaa..32c9b47a48d 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -81,17 +81,6 @@ describe('Integration', () => { doc.defaultView.close(); }); - it('graphql files inclusion', async () => { - const doc = await initDOM('graphql-inclusion'); - const children = doc.getElementById('graphql-inclusion').children; - - // .graphql - expect(children[0].textContent.replace(/\s/g, '')).toBe( - '{"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"test"},"value":{"kind":"StringValue","value":"test","block":false}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[],"directives":[]}]}}]}}],"loc":{"start":0,"end":40,"source":{"body":"{\\ntest(test:\\"test\\"){\\ntest\\n}\\n}\\n","name":"GraphQLrequest","locationOffset":{"line":1,"column":1}}}}' - ); - doc.defaultView.close(); - }); - it('image inclusion', async () => { const doc = await initDOM('image-inclusion'); diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 73c844a8aaf..380a49fc639 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -134,11 +134,6 @@ class App extends Component { this.setFeature(f.default) ); break; - case 'graphql-inclusion': - import('./features/webpack/GraphQLInclusion').then(f => - this.setFeature(f.default) - ); - break; case 'image-inclusion': import('./features/webpack/ImageInclusion').then(f => this.setFeature(f.default) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js deleted file mode 100644 index 728b7a2847d..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Copyright (c) 2018-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import A from './assets/graphql.graphql'; - -export default () => ( -

- {JSON.stringify(A)} -

-); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js deleted file mode 100644 index 914ce241bdd..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) 2018-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import ReactDOM from 'react-dom'; -import GraphQLInclusion from './GraphQLInclusion'; - -describe('graphql files inclusion', () => { - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - }); -}); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql deleted file mode 100644 index 6125e344f55..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql +++ /dev/null @@ -1,5 +0,0 @@ -{ - test(test: "test") { - test - } -} diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 35c7d5e7aca..4b4cf171a51 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -46,8 +46,6 @@ "eslint-plugin-react": "7.11.1", "file-loader": "1.1.11", "fs-extra": "7.0.0", - "graphql": "0.13.2", - "graphql-tag": "2.9.2", "html-webpack-plugin": "4.0.0-alpha.2", "identity-obj-proxy": "3.0.0", "jest": "23.6.0", diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index a1a16a00240..c077746a9e2 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -35,10 +35,7 @@ module.exports = (resolve, rootDir, isEjecting) => { ? '/node_modules/babel-jest' : resolve('config/jest/babelTransform.js'), '^.+\\.css$': resolve('config/jest/cssTransform.js'), - '^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'), - '^(?!.*\\.(js|jsx|css|json|graphql)$)': resolve( - 'config/jest/fileTransform.js' - ), + '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'), }, transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$', diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 42c8b12acb7..d162889bb20 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -27,7 +27,6 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Post-Processing CSS](#post-processing-css) - [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) - [Adding Images, Fonts, and Files](#adding-images-fonts-and-files) -- [Adding GraphQL files](#adding-graphql-files) - [Using the `public` Folder](#using-the-public-folder) - [Changing the HTML](#changing-the-html) - [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system) @@ -732,34 +731,6 @@ Please be advised that this is also a custom feature of Webpack. **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section. -## Adding GraphQL files - -> Note: this feature is available with react-scripts@2.0.0 and higher. - -If you are using GraphQL, you can **`import` GraphQL files in a JavaScript module**. - -By importing GraphQL queries instead of using a [template tag](https://github.com/apollographql/graphql-tag), they are preprocessed at build time. This eliminates the need to process them on the client at run time. It also allows you to separate your GraphQL queries from your code. You can put a GraphQL query in a file with a `.graphql` extension. - -Here is an example: - -```js -// query.graphql -{ - githubStats(repository: "facebook/react") { - stars - } -} - -// foo.js - -import query from './query.graphql'; - -console.log(query); -// { -// "kind": "Document", -// ... -``` - ## Using the `public` Folder >Note: this feature is available with `react-scripts@0.5.0` and higher.