I have been working on integrating react storybook with the reactQL package. Storybook is a way to rapidly prototype react components and it has really been speeding up my development time. It also has automatic jest snapshot testing in place, which helps catch regressions that break the UI.

Here is a forked version that I almost have 100% operational (albeit the webpack.config file is not utilizing the lovely webpack config files already in place because of my ignorance of how to use them properly). The only issue I am having is in files where I am importing a *.gql file because there is a mutation/query. I get the following error simply by having the import *gql statement, even if I don’t try and use it in HOC with the react component.

ERROR in ./src/graphql/mutations/editMutation.gql
Module build failed: GraphQLError: Syntax Error GraphQL request (2:5) Unexpected Name "var"

1: 
2:     var doc = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"esanalyzerEditMicrogrid"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},"defaultValue":null},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"objectPath"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Array"}}},"defaultValue":null},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"num"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Number"}},"defaultValue":null},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"str"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":null}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":null,"name":{"kind":"Name","value":"esanalyzerEditMicrogrid"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"objectPath"},"value":{"kind":"Variable","name":{"kind":"Name","value":"objectPath"}}},{"kind":"Argument","name":{"kind":"Name","value":"num"},"value":{"kind":"Variable","name":{"kind":"Name","value":"num"}}},{"kind":"Argument","name":{"kind":"Name","value":"str"},"value":{"kind":"Variable","name":{"kind":"Name","value":"str"}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":null,"name":{"kind":"Name","value":"id"},"arguments":[],"directives":[],"selectionSet":null}]}}]}}],"loc":{"start":0,"end":200}};
       ^
3:     doc.loc.source = {"body":"mutation editMutation($id: String!, $objectPath: Array!, $num: Number, $str: String) {\r\n  editMutation(id: $id, objectPath: $objectPath, num: $num, str: $str) {\r\n    id\r\n  }\r\n}\r\n","name":"GraphQL request","locationOffset":{"line":1,"column":1}};

    at syntaxError (C:\SVN\frontend\node_modules\graphql\error\syntaxError.js:31:15)
    at unexpected (C:\SVN\frontend\node_modules\graphql\language\parser.js:996:33)
    at parseDefinition (C:\SVN\frontend\node_modules\graphql\language\parser.js:155:9)
    at parseDocument (C:\SVN\frontend\node_modules\graphql\language\parser.js:109:22)
    at parse (C:\SVN\frontend\node_modules\graphql\language\parser.js:46:10)
    at parseDocument (C:\SVN\frontend\node_modules\graphql-tag\src\index.js:128:16)
    at gql (C:\SVN\frontend\node_modules\graphql-tag\src\index.js:161:10)
    at Object.module.exports (C:\SVN\frontend\node_modules\graphql-tag\loader.js:44:18)
 @ ./src/components/control_input/index.js 18:31-93
 @ ./src/components/control_input/index.stories.js
 @ ./src \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

This has something to with how the graphql-tag/loader is working in the webpack.config file. I am curious if someone could suggest how I can modify my webpack.config file to match the functionality of reactQL’s webpack. Hopefully if we can get this working, this functionality can be added into the main repo because it really simplifies the component design lifecycle:

1. Design the query/mutation in graphiQL
2. Design the dumb component in storybook with all the states you can possibly need
3. Add the query/mutation as a @graphql() HOC to the component
4. Use something like storybook-addon-apollo-graphql to mock how the mutation will work with a fake grapnQL server
5. Put the working component into the real working app

That’s it! Anyway, thanks for your interest and help! I absolutely love the reactQL project and use it in the two main projects I am developing right now.

Is this a know issues?

./node_modules/koa-send/index.js:37
async function send (ctx, path, opts = {}) {
^^^^^^^^
SyntaxError: Unexpected token function

I got this in every blank installation. Browser Build work fine.

I've tried to peek around the webpack config, but there's a bit of magic in here. Basically, the styles.css (less/sass/css) don't compile when named anything other than style.css.

For example, I have a Landing.css file sitting next to a Landing.js file and loading the ./Landing.css from the JS module explodes with the error:

Failed to compile.

(undefined) ./src/views/Public/Landing/landing.css
Module parse failed: ...src/views/Public/Landing/landing.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .landing {
|   color: blue;
| }
 @ ./src/views/Public/Landing/Landing.js 7:0-35
 @ ./src/app.js
 @ ./kit/entry/browser.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./kit/entry/browser.js

However, when I rename the file to style(s).css, the file loads. Any idea why/where this is happening?

Greetings!

First of all, Great work! Thanks!)

What do you think of adding Flow to the kit?

CSS sourcemaps

Per leebenson/reactql#22

Any tips?

I'm getting an issue with react-virtualized but only in production, and it's not SSR related.

I've tried changing node_env to development and building but it doesn't build properly and breaks things.

Edit: looks like things run just fine without uglify.

Per leebenson/reactql#4

Is there any workaround to get cookies from React component when SSR?

Hi,
First I'd like to thank you for such an amazing work.

I have question about authentication. When we used custom boilerplate, we tend to put JSON Web Token in store, and access the store from apollo network middleware.

import {
    store
} from './index'; //I can import it here since this will run only on client
const networkInterface = createNetworkInterface({ uri: '/graphql' });
networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {}; 
    }
    req.options.headers['authorization'] = store.getState().token.token;
    next();
  }
}]);

In your boilerplate, you use same code for both server and client initialization (with minor option changes). This basically makes it hard to access store from client (since it would call client side store initialization during ssr and all that stuff). Do you have some kind of recommended approach to solve authorization?

const networkInterface = createNetworkInterface({
  uri: APOLLO.uri,
});
networkInterface.use([
  {
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {}; 
      }
      const store = require('../entry/browser.js').store; //workaround to require store only on client
      req.options.headers.authorization = store.getState().auth.token;
      next();
    },
  },
]);

One of the greater challenges with the upgradeability of ReactQL versions in base projects is managing the customization of webpack configurations with the pulling in of new ReactQL versions. The different configurations are broken out so well (browser_dev, browser_prod, base, server_dev, etc.) that ultimately it seems much cleaner to make changes in those files then to have a separate override webpack config file (or files) where modifications are defined and merged with the kit's configurations. With a separate file, one just has another layer to look through in the code to see how the ultimate configuration is getting built (i.e., base, server, server_ + another config?) However, the alternative is every upgrade to the base 'kit' is ultimately a practice of pulling in the kit then manually altering the appropriate configurations. Maybe that's the "best balance that can be struck between functioning yet configurable base project", but I wonder if there's some changes that could be made.

Ultimately, while most of the default kit/webpack defaults/selections are great/fine, I've seen some challenges in just adopting them wholesale:

1. The desire to use Webpack's environment plugin (https://webpack.js.org/plugins/environment-plugin/) to manage environment variables between environments. This can be useful for example when one would have different GraphQL URLs per environment (and ultimately this makes using config/path.js without modifications difficult - should the current URL be a config value perhaps? Sorry, getting off-track). Should the environment plugin perhaps be defined in the various configs but empty (unless there are default values that make sense) and then overrideable outside the kit by ReactQL user's in a way that can be aligned with the different webpack env configs? In short, I'm just wondering if users can have better hooks for their own environment variables, like the GraphQL URL.

2. The current configuration is not Docker friendly on Linux (at least on Centos 7.2). Challenges include:
   a) compression-webpack-plugin – one of the options here is to compress the bundles using ‘zopfli’ which has to run a postInstall scripts that bombs on linux. The fallback is to use ‘gzip’ as the compression algorithm (this works - I wonder if this could/should be a more easily overrideable config?)
   image-webpack-loader – the file compression optimizations libraries that are used for optimizing image files in the bundles are really hard to get loaded on Centos; the primary library that pukes is pngquant. The fallback here, for now, is to use the standard ‘file-loader’ from webpack to bundle these files, and remove the loader from the project

Ultimately one can, with these changes, get the application building with Docker (using Node 8 and npm 5).

Changing these configurations in #2 seems reasonable for users to do - they are good defaults, but changing them shouldn't in my mind be destructive to the objectives of the ReactQL project - i.e., the webpack files are broken out and written in such a way to make them changeable/modifiable - but how should users best do this while still having upgradeable paths to pull in the latest and greatest ReactQL changes?

Code splitting via the dev web server generates an error:

Error Cannot find module './1.../server_dev.js'

It works in production.

Currently, only png and gif image optimises correctly build binaries in Docker (and possibly locally, too):

[email protected] postinstall /src/node_modules/pngquant-bin
node lib/install.js

⚠ The /src/node_modules/pngquant-bin/vendor/pngquant binary doesn't seem to work correctly
⚠ pngquant pre-build test failed
ℹ compiling from source
✖ Error: pngquant failed to build, make sure that libpng-dev is installed
at ChildProcess.exithandler (child_process.js:252:12)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at maybeClose (internal/child_process.js:887:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)

[email protected] postinstall /src/node_modules/optipng-bin
node lib/install.js

✔ optipng pre-build test passed successfully

[email protected] postinstall /src/node_modules/mozjpeg
node lib/install.js

⚠ The /src/node_modules/mozjpeg/vendor/cjpeg binary doesn't seem to work correctly
⚠ mozjpeg pre-build test failed
ℹ compiling from source
✖ Error: autoreconf -fiv && ./configure --disable-shared --prefix="/src/node_modules/mozjpeg/vendor" --bindir="/src/node_modules/mozjpeg/vendor" --libdir="/src/node_modules/mozjpeg/vendor" && make --jobs=4 && make install --jobs=4
Command failed: autoreconf -fiv
/bin/sh: 1: autoreconf: not found

at ChildProcess.exithandler (child_process.js:252:12)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at maybeClose (internal/child_process.js:887:16)
at Socket.stream.socket.on (internal/child_process.js:340:11)
at emitOne (events.js:115:13)
at Socket.emit (events.js:210:7)
at Pipe._handle.close [as _onclose] (net.js:546:12)

[email protected] postinstall /src/node_modules/gifsicle
node lib/install.js

✔ gifsicle pre-build test passed successfully
npm notice created a lockfile as package-lock.json. You should commit this file.

Whats the best way to add a second entry point in reactql?

Already readed https://webpack.github.io/docs/multiple-entry-points.html but either i'm blind or the needed
config is splitted over the js files in webpack folder?

First off thank you for an excellent boilerplate kit. I only wish all projects came with this level of polish and documentation!

I'm having a devil of a time getting this is play nicely with the Semantic UI Library and I think this issue externals to using external styles in general

Steps to Reproduce:

1. npm install semantic-ui-react --save
2. npm install semantic-ui-css --save
3. Add import 'semantic-ui-css/semantic.min.css'; to src/app.js
4. Remove server-dev from start in package.json (for debugging only)

Fails with error:

(undefined) ./~/css-loader?{"minimize":false,"localIdentName":"[local]-[hash:base64]","importLoaders":1,"sourceMap":true,"modules":true}!./~/postcss-loader/lib?{"sourceMap":true}!./~/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve 'themes/default/assets/images/flags.png' in '/Users/kyle/Documents/reactql-app/node_modules/semantic-ui-css'
 @ ./~/css-loader?{"minimize":false,"localIdentName":"[local]-[hash:base64]","importLoaders":1,"sourceMap":true,"modules":true}!./~/postcss-loader/lib?{"sourceMap":true}!./~/semantic-ui-css/semantic.css 6:204774-204823
 @ ./~/semantic-ui-css/semantic.css
 @ ./src/app.js
 @ ./kit/entry/browser.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./kit/entry/browser.js

Note that themes/default/assets/images/flags.png does indeed exist in /Users/kyle/Documents/reactql-app/node_modules/semantic-ui-css

I've looked into css-loader an postcss-loader to no avail. Any tips on loading this library? I'd be happy to write up a section for your documentation.

Per leebenson/reactql#13

Would it be possible to extend ReactQL to allow for modular style imports from 3rd party frameworks? e.g. Use modularized antd

I read the ReactQL docs on third party frameworks. I understand that the current solution is to import the framework from the css side of things with the @import declaration in a .global.(css|sass|scss|less) file.

Would it possible for webpack css loaders to handle this differently via JS imports instead?

Update: Furthest i got was adjusting webpack/common.js's getModuleRegExp method to set modules: false on a regex pointing to node_modules/antd path. Was able to load the antd framework styles without relying on styles.global. However, some styles required/imported by the antd framework were missing from this solution. I could see the styles but the framework's css animations were not working. Wound up falling back on the documented styles.globals method for now.

Hi @leebenson

When I try to use graphql fragments as suggested in the Apollo docs it works fine for dev but when I try to build production it is failing at the #import (I can grab the actual error message when I'm back at my computer later but I'm guessing I'm just setting up the webpack config incorrectly)

I've added to webpack config in loaders section in both base.js and browser.js the snippet from apollo which gets it going locally for dev but not for production - do you know how to set this up properly to use fragments and graphql-tag/loader?

module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
},

There was no rules section in the reactql configs so I put it in loaders as it had similar objects and I'm not a webpack expert.

There are currently differences in the way CSS, LESS and SASS @import statements resolve, causing unexpected behaviour when using ~ to represent node_modules, and relative path names that don't follow the expected Webpack setting.

Needs proper testing.

Hi there. I love this boilerplate but have bumped up against this import/export error in multiple places in my code.

React hot loader indicates that this error may occur with RHL v3 in Webpack if React Hot Loader isn't loaded to the left of Babel in loaders array in Webpack config. here, midpage Having tried several changes in kit-level config without success I've now reverted to core kit config. Suggestions?

Hi, I'm using Reactql while making my personal website and I'm adressing you with an issue I'm having. I have a problem when a component I'm using for my gallery is expected to read my .css file. It is implied that a component is expecting me to @import url('link'); in styles.css. Also, I tried to import a link into my browser HTML file (knowing that is something I should not be doing) . Is there a possibility that I can get this working? Also, I have an issue with any google font's I try to import. Heroku is my deploy destination.

Suggestion: With the release of Relay Modern yesterday, it would be cool to have a Relay integration included within the documentation for ReactQL.

I'm not saying a Relay version of ReactQL needs to be spun up at this point in time but instead providing guidelines in the docs for how-to/best practices on Relay integration would satisfy most use-cases.

Realise this adds extra complexity but it could also benefit the adoption of ReactQL by opening it up to a wider audience - and by keeping Relay-related info in the documentation rather than adding it to the codebase there will be less confusion.

Thoughts?

I have run through the code and could not locate the problem. No changes to the config other than the Apollo url for my backend. Could be that I did the update incorrectly.

[email protected] server /src
node dist/server

fs.js:652
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^

Error: ENOENT: no such file or directory, open '/src/dist/manifest.json'
at Object.fs.openSync (fs.js:652:18)
at fs.readFileSync (fs.js:553:33)
at webpack_require.map.name (/src/dist/server.js:577:110)
at Array.map (native)
at Object. (/src/dist/server.js:577:66)
at webpack_require (/src/dist/server.js:20:30)
at Object. (/src/dist/server.js:513:18)
at webpack_require (/src/dist/server.js:20:30)
at /src/dist/server.js:63:18
at Object. (/src/dist/server.js:66:10)

I'm having an issue starting on windows - looks to me like it's not transpiling the .babel.js files but I'm new to webpack/babel. Do I need extra packages/config in node on windows to build it? (edit: it starts/builds/runs fine in OSX with Node 7.10.0)

> cross-env WEBPACK_CONFIG=browser_dev webpack-dev-server

C:\Users\tdexter\Documents\stuff\app\webpack.config.babel.js:11
import Config, { environment } from 'webpack-config';

^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at module.exports (C:\Users\tdexter\AppData\Roaming\npm\node_modules\webpack\bin\convert-argv.js:80:13)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `cross-env WEBPACK_CONFIG=browser_dev webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'cross-env WEBPACK_CONFIG=browser_dev webpack-dev-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env WEBPACK_CONFIG=browser_dev webpack-dev-server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls app 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\tdexter\AppData\Roaming\npm-cache\_logs\2017-05-23T14_53_03_280Z-debug.log

Koa has option to change app.context (the prototype from which ctx is created from). Could we have a method to do that without modifying "kit" folder files?

Hi,

Kea is a very interesting library that provides high level abstraction between React, Redux, Reselect & Redux Saga & make coding in redux so much simpler & fun!

I'm trying to Integrate Kea.js library into ReactQL and seems like I got both server & browser to render fine during yarn start, but yarn build fails with the following errors:

yarn build v0.22.0
$ cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors
ReactQL browser bundle in production mode building [=======             ] 35% (5.4 seconds)(node:61641) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Build completed in 5.906s

Build completed in 12.53s

Child
    Hash: f2c7f33e4aacc5f00c2d
    Time: 12536ms

    ERROR in vendor.283918ccad5a8334b903.js from UglifyJs
    Invalid assignment [vendor.283918ccad5a8334b903.js:1019,46]
Child
       46 modules

Couldn't parse bundle asset "/Users/hafiz/Development/git/test/reactql-kea/dist/public/browser.da1541e351531bdbce14.js".
Analyzer will use module sizes from stats file.

Webpack Bundle Analyzer saved report to /Users/hafiz/Development/git/test/reactql-kea/dist/report.html
error Command failed with exit code 2.

Please review the coding changes that I did as follows: reactql-kea

I added regenerator-runtime to entry/server.js because Kea js requires it & server side rendering would fail to start otherwise. (browser entry seems to have it already)

Any ideas?

I am using antd as a third party library for react components. Using reactql causes issues with styling, as it is not applied on the antd components leaving them naked. My best guess would be, that antd's css imports are treated as local module imports. If I set modules: false for all css loaders in common.js of webpack configuration, antd components are styled perfectly fine. I am not super familiar with webpack configuration, but is there an easy solution for still scoping my local css/less to be imported as modules, but leave everything else (basically node_modules) out of the css-loader?

Would it be worth having a .vscode settings directory integrated with the project? I hate to make an assumption that another developer is going to use VSCode, but a lot of functionality could be provided by providing this integration. Some benefits that I can think of include

• smart defaults related to styling and configuration in the settings
  • rulers
  • eslint auto fix on save
  • remove trailing white space while typing
  • hide unimportant directories and files from tree view
• build and start tasks defined
• out of the box support for in editor debugging.

Hey Lee, just installed reactql and started a new project. I am using Atom and am getting a couple errors with ESLint the config file.

I am working through them as it may be my local environment but thought I would bring it up.

Per leebenson/reactql#26

One thing I cannot do so far is importing css from third party sources, without having it processed through css-modules. As third party css generally doesn't follow the *.global.css rule, it gets processed through css-modules and gets its class names messed up. I've tried a couple of approaches using different include and exclude rules, but haven't found a solution that works yet.

Is there any plan to add an example with graphcool authentication (or any authentication) to show/hide routes/data for logged in users?

I think it'd be quite handy to see the 'done properly' way of doing this.

Less a issue than a question:

I've got a custom font I can't really link to elsewhere - what is the recommended location to put fonts or images that won't change frequently enough to worry about caching?

Track soundcloud/chunk-manifest-webpack-plugin#47 (comment)

Hi all,

Firstly, I love the kit. It's been amazing.

I've run into a small issue where I am using Authentication / Authorization for a GraphQL server. All it does currently is throw an error when the user is not Authenticated - this works fine client side, but on server side, it just fails entirely.

if (ctx.header.authorization) {
      token = verify(ctx.header.authorization.replace('Bearer ', ''), process.env.APP_SECRET);
    }
    if (!token) {
      return ctx.throw(401, '401 - Unauthorized');
    }

How would I tell the kit to ignore any GraphQL errors and still render the the React components? All I basically want it to do is still render even if there is an error.

I've implemented this in the networkInterface, but it seems that the error still gets triggered in the kit.

const logErrors = {
  applyAfterware({ response }, next) {
    if (!response.ok) {
      response.clone().text().then(bodyText => {
        console.log(`Network Error: ${response.status} (${response.statusText}) - ${bodyText}`);
        next();
      });
    } else {
      response.clone().json().then(({ errors }) => {
        if (errors) {
          console.log('GraphQL Errors:', errors.map(e => e.message));
        }
        next();
      });
    }
  },
};

networkInterface.useAfter([logErrors]);

Thanks.

Explore adding in features of Progressive Web Apps

Hi, thank you for your great kit and for making our lifes a little bit simplier 👍

In my project I need to access browserHistory object to manage navigation inside my redux actions.
I've replaced BrowserRouter with Router inside 'browser' entry and passed history object created with 'history/createBrowserHistory' to Router component as a prop.
And now I'm able to control this history my importing the same history object inside my redux actions.

But the problem is that I've changed reactql's file 'kit/entry/browser.js' and on next update my changes will be overwritten.

Could you please give the out-the-box ability to get browser history and import it anywhere in my react app?

Hi, I am trying to incorporate ant-design UI framework with reactql. In order to make the component imports modularized, I need to set babel-plugin-import in .babelrc file as suggested over here Use-modularized-antd

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
  ]
}

However, the styles from the UI framework are not passed down to the react component. It works if I manually import the styles manual style import.

Do I need to add the babel-plugin-import in the webpack file to make the styles import work?

With the recent support of enabling CORs options and the auth example, it would really be nice to be able to run the servers as HTTPS or HTTP. I see the getURL functions have the flag in there as well. Are there plans to build support for this?

So far the starter kit works great. However, could you please provide an example of the react component code splitting (i.e creating different folder/components). At the moment everything is under src folder. How does react router 4 works with react component resides in the different folder under src.

Figure out the best way to approach internationalisation.

Hi, I think a lot of people would rather opt in Relay Modern instead of Apollo, since Relay Modern is optimized for performance. I understand Apollo used to dominate Graphql client before Relay Modern officially released few weeks ago, but now the game is changing. Would you mind giving us a choice for Relay Modern when creating a project? Also, I think Relay Modern should be the default choice, and Apollo an alternative, since Apollo is more of a general purpose client that targets other frameworks as well, while Relay Modern is optimized for mostly React framework

hi - first off thank you for the amazing framework - it works very well.
i wanted to know if there were some working examples of passportjs/facebook/with a store
i can see the code works very well with generic koa
[email protected]:wahyudibo/koa-passport-facebook-example.git

but i can't get it to work with reactql. also using koa-session on reactql just sets the session in the encrypted cookie making it too big for the browser to reject it

any code snippets, working examples etc would be very much appreciated

Per leebenson/reactql#25

Has anyone deployed a ReactQL app to Heroku?

It's not working especially smoothly right off the bat, and while I'm working through the issues, just wondering if anyone else has done it and happens to know the steps needed.

It's mostly complaining that stuff like run-p and cross-env aren't installed (they are in devDependencies)

Or perhaps I'm doing this all wrong :)

I found small bugs.

It is related to what I have said on reactql/docs#1.

Anytime I add new package I have to npm rebuild node-sass to get my project back to work.

Here is console output I am getting:

Another node-sass related error. I am getting is when I try to add new package eg. semantic-ui. I just can't do it when my webpack dev server is up and running. I have to stop the script first.

Console output:

E:\projekty_node\netins>yarn add semantic-ui
yarn add v0.24.5
[1/4] Resolving packages...
warning semantic-ui > [email protected]: breaking changes from clean-css 4.x. Please install gulp-clean-css 3.x
warning semantic-ui > gulp > vinyl-fs > glob-stream > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning semantic-ui > gulp-clone > through2 > xtend > [email protected]:
warning semantic-ui > gulp > vinyl-fs > glob-watcher > gaze > globule > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning semantic-ui > gulp > vinyl-fs > glob-watcher > gaze > globule > glob > [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the
tree.
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
error An unexpected error occurred: "EPERM: operation not permitted, unlink 'E:\\projekty_node\\netins\\node_modules\\node-sass\\vendor\\win32-x64-51\\binding.node'".
info If you think this is a bug, please open a bug report with the information provided in "E:\\projekty_node\\netins\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

After updating reactql, eslint stopped working.
With this error: airbnb/javascript#1454
This is why : airbnb/javascript#1447
airbnb doesn't support eslint v4

To reproduce:

npm i -g reactql
reactql n

Just press enter to get the defaults.
cd reactql-app
and run
npm ls
this is what you'll get:

npm ERR! peer dep missing: eslint@^3.19.0, required by [email protected]
npm ERR! peer dep missing: eslint-plugin-jsx-a11y@^5.0.1, required by [email protected]
npm ERR! peer dep missing: webpack@^2.0.0 || ^2.1.0-beta || ^2.2.0-rc, required by [email protected]
npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]
npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]
npm ERR! peer dep missing: webpack@^1.3.0 || ^2 || ^2.1.0-beta || ^2.2.0-rc, required by [email protected]
npm ERR! peer dep missing: webpack@^2.2.0, required by [email protected]
npm ERR! peer dep missing: eslint@^3.19.0, required by [email protected]

I could not really find an answer and I am not sure if it is good place to ask.

yarn -v 0.22.0
npm -v 4.1.2
node -v 7.5.0
reactql version 2.1.0

Is is possible to use subscriptions with SSR? I am aware that nodejs does not have direct support for websockets, so we have to install package/library to add desired functionality...

SubscriptionClient is used for client/browser.

Of course I use Graph.cool as my backend service.

webSocketImpl: Object - optional, WebSocket implementation. use this when your environment does not have a built-in native WebSocket (for example, with NodeJS client)

Here is part of my apollo.js file:

import WebSocket from 'ws';
import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';

const wsClient = new SubscriptionClient(APOLLO.socketsUri, {
  reconnect: true,
  connectionParams: {
  }
}, WebSocket); // webSocketImpl object

Error I am getting when I don't use webSocketImpl object

It does not seem to work when I use npm run build-run (console dump). Clearly I am doing something wrong, can I get guidance or can you point me to an example which shows how to implement subscriptions with SSR?