mackentoch / react-redux-graphql-apollo-bootstrap-webpack-starter Goto Github PK

Hello, i did a fresh install with the last version from Master branch using Node 8.11 and when i try start up the application throw the next error.

ERROR in ./src/front/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (33:4)

  31 | const renderApp = RootComponent => {
  32 |   render(
> 33 |     <AppContainer warnings={false}>
     |     ^
  34 |       <RootComponent />
  35 |     </AppContainer>,
  36 |     // $FlowIgnore

Any idea about this ?

as soon as I do import styles from './styles.css';ssr is not working anymore. Anyone already faced that problem before?

When you run the command

npm run dev

In the frontend the console throw:

loadable-components state not found. You have a problem server-side. Please verify that you have called loadableState.getScriptTag() server-side.

Looks like the server render can't create the initial state.

Hi there,

I really like your boilerplate. Thanks a lot (:

The only weird thing I've noticed is how prod bundle is done. Where should I put my static files, like images, fonts?

At first I put at public folder, but then noticed that the bundle wasn't loading my assets. Also, I find it really weird that there is a index.html that is static, not copied from root folder in webpack bundle.

Did I missed something?

Thanks

I have this error when i try to test register user from app:
GraphQL error: User is not permitted to access mutation: createUser

I want to discuss some concepts about ability to use/switch to multiple gql query while connecting it to the same component. What I meant was something like this:
http://dev.apollodata.com/react/api-graphql.html#graphql-config-skip

export default compose(
  graphql(gql`query MyQuery1 { ... }`, { skip: props => !props.useQuery1 }),
  graphql(gql`query MyQuery2 { ... }`, { skip: props => props.useQuery1 }),
)(MyComponent);
function MyComponent({ data }) {
  // The data may be from `MyQuery1` or `MyQuery2` depending on the value
  // of the prop `useQuery1`.
  console.log(data);
}

However, this still seems very static, and "declarative". Consider you have 2 very similar Scroll components, that has exactly the same type of View. One lists the top 100 movies, the other lists all movies matching a given set of movie Director names. The only difference here would be the gql queries, and query variables for them. It'd be nice to pass the gql query down as props.

Consider these 2 views: IndexView, MoviesView.

The way i consume the dynamic gql query and connect it to the component is to create a wrapper component like this. (In comments)

const MoviesWithCusorWrapper = (props) => {
  const { gql = moviesQuery } = props;
  const Comp = compose(graphql(gql, gqlConfig), withLoading)(Movies);

  return React.createElement(Comp, props);
};

or to simplify it further (without the added recompose and gqlConfig options, only the idea of the Wrapper Component):

const MoviesWrapper = (props) => {
  const Comp = graphql(props.gql)(Movies);

  return React.createElement(Comp, props);
};

I've abstracted the wrapper component as a HOC to something like this:

import React from 'react';
import _ from 'lodash';
import { compose } from 'recompose';
import { graphql } from 'react-apollo';

const withGqlPropsHOC = (gqlDefault, { enhancers, gqlConfig }) => Comp => (props) => {
  const { gql = gqlDefault } = props;
  // preppedEnhancers takes care of undefined, single parameter, array of enhancers
  const preppedEnhancers = _.compact(Array.isArray(enhancers) ? enhancers : [enhancers]);
  const EnhancedComp = compose(graphql(gql, gqlConfig), ...preppedEnhancers)(Comp);

  return React.createElement(EnhancedComp, props);
};

export default withGqlPropsHOC;

so we can use it like this:

export default
withGqlProps(moviesQuery, { enhancers: [withLoading], gqlConfig })(Movies);

Which results in 2 different query by passing it down as props,

Is there already something similar provided by apollo-core/apollo libraries? Any thoughts?

When I hit NPM install to install this package, I get the following errors:

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 15.* || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.5.4
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13.2 || ^0.14 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0 || ^15.4.0-0 || ^16.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.4.0-0
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 0.14.x || ^15.0.0-0 || 15.x
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.9 || ^15.3.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.9 || ^15.3.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.9 || ^15.3.0

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/koenhoutman/hashtracks/ui/npm-debug.log

So maybe it's a good idea to check up on the versioning of all the node modules. Have been unable to solve this yet.

Fix file naming:
src/app/views/pageNotfound/PageNotfound.js -> src/app/views/pageNotFound/PageNotFound.js