1.6.0

1.6.0 - 2017-06-06
------------------------------------------------

## GraphQL
* Adds `graphql-tag` loader, for storing queries in `.gql|graphql`
files (closes #32)
* Refactors `src/app.js` to use file queries
* Adds `src/queries/all_messages.gql`, for retrieving GraphCool
endpoint messages
* Adds `src/queries/message.gql`, imported by `all_messages.gql` as a
query fragment

## Webpack
* Adds `graphql-tag` loader config to `kit/webpack/base.js`

## NPM
* Adds packages:
"graphql-tag": "^2.2.1"

Author: leebenson

CHANGELOG

@@ -1,3 +1,19 @@
+1.6.0 - 2017-06-06
+------------------------------------------------
+
+## GraphQL
+* Adds `graphql-tag` loader, for storing queries in `.gql|graphql` files (closes #32)
+* Refactors `src/app.js` to use file queries
+* Adds `src/queries/all_messages.gql`, for retrieving GraphCool endpoint messages
+* Adds `src/queries/message.gql`, imported by `all_messages.gql` as a query fragment
+
+## Webpack
+* Adds `graphql-tag` loader config to `kit/webpack/base.js`
+
+## NPM
+* Adds packages:
+"graphql-tag": "^2.2.1"
+
 1.5.3 - 2017-06-06
 ------------------------------------------------
 

kit/webpack/base.js

@@ -63,6 +63,13 @@ export default new WebpackConfig().merge({
         },
       },
 
+      // GraphQL queries
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader',
+      },
+
       // Images.  By default, we'll just use the file loader.  In production,
       // we'll also crunch the images first -- so let's set up `loaders` to
       // be an array to make extending this easier

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react": "^7.0.1",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
+    "graphql-tag": "^2.2.1",
     "html-webpack-plugin": "^2.28.0",
     "image-webpack-loader": "^3.3.1",
     "less": "^2.7.2",

src/app.js

@@ -1,12 +1,14 @@
 // ----------------------
 // IMPORTS
 
+/* NPM */
+
 // React
 import React from 'react';
 import PropTypes from 'prop-types';
 
 // GraphQL
-import { gql, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
 // Routing
 import {
@@ -18,9 +20,14 @@ import {
 // <Helmet> component for setting the page title
 import Helmet from 'react-helmet';
 
+/* Local */
+
 // NotFound 404 handler for unknown routes
 import { NotFound, Redirect } from 'kit/lib/routing';
 
+// GraphQL queries
+import allMessages from 'src/queries/all_messages.gql';
+
 // Styles
 import './styles.global.css';
 import css from './styles.css';
@@ -79,20 +86,10 @@ const Stats = () => {
 
 // Now, let's create a GraphQL-enabled component...
 
-// First, create the GraphQL query that we'll use to request data from our
-// sample endpoint
-const query = gql`
-  query {
-    allMessages(first:1) {
-      text
-    }
-  }
-`;
-
 // ... then, let's create the component and decorate it with the `graphql`
 // HOC that will automatically populate `this.props` with the query data
 // once the GraphQL API request has been completed
-@graphql(query)
+@graphql(allMessages)
 class GraphQLMessage extends React.PureComponent {
   static propTypes = {
     data: PropTypes.shape({

src/queries/all_messages.gql

@@ -0,0 +1,7 @@
+#import "./message.gql"
+
+query AllMessages {
+  allMessages(first:1) {
+    ...Message
+  }
+}

src/queries/message.gql

@@ -0,0 +1,3 @@
+fragment Message on Message {
+  text
+}

yarn.lock

@@ -3315,6 +3315,10 @@ graphql-tag@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.2.0.tgz#9ea24f35a19aab1be1e55675928344d84d852905"
 
+graphql-tag@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.2.1.tgz#1da61feb6c6fc119ee8c579c4de424d389bee0c2"
+
 graphql@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.1.tgz#75c93c2ce73aeb5bae2eefb555a8e9e39c36027d"