Skip to content
This repository has been archived by the owner on Jan 26, 2019. It is now read-only.

Add loader for .graqhql files #270

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions config/jest/graphqlTransform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// @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);
},
};
5 changes: 5 additions & 0 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,11 @@ module.exports = {
},
],
},
// The GraphQL loader preprocesses GraphQL queries in .graphql files.
{
test: /\.(graphql)$/,
loader: 'graphql-tag/loader',
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
Expand Down
5 changes: 5 additions & 0 deletions config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,11 @@ module.exports = {
},
],
},
// The GraphQL loader preprocesses GraphQL queries in .graphql files.
{
test: /\.(graphql)$/,
loader: 'graphql-tag/loader',
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* 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 () => (
<p id="graphql-inclusion">
<span>{JSON.stringify(A)}</span>
</p>
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* 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(<GraphQLInclusion />, div);
});
});
3 changes: 2 additions & 1 deletion scripts/utils/createJestConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ module.exports = (resolve, rootDir, isEjecting) => {
: resolve('config/jest/babelTransform.js'),
'^.+\\.tsx?$': resolve('config/jest/typescriptTransform.js'),
'^.+\\.css$': resolve('config/jest/cssTransform.js'),
'^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve(
'^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
'^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve(
'config/jest/fileTransform.js'
),
},
Expand Down
31 changes: 29 additions & 2 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ 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)
Expand Down Expand Up @@ -299,7 +300,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s

Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.

The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

## Formatting Code Automatically

Expand Down Expand Up @@ -695,6 +696,32 @@ 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).<br>
An alternative way of handling static assets is described in the next section.

## Adding GraphQL files

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 `[email protected]` and higher.
Expand Down Expand Up @@ -2002,7 +2029,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c
RewriteRule ^ index.html [QSA,L]
```

It will get copied to the `build` folder when you run `npm run build`.
It will get copied to the `build` folder when you run `npm run build`.

If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).

Expand Down
5 changes: 5 additions & 0 deletions template/src/graphql.graphql
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
test(test: "test") {
test
}
}