facebookarchive/relay-starter-kit

Barebones starting point for a Relay application.

DEPRECATED

This repo is no longer actively maintained.

This repo provided a basic starting point for building a "Relay Classic" (that is, Relay prior to version 1.0.0) application. All future development work is being undertaken on "Relay Modern" (version 1.0.0 and above).

The contents of this repo are being conserved for historical interest only, but we don't have any plans to update the code. If you'd like to get started with building a Relay Modern application, please see the link below. PRs to improve the documentation for the onboarding experience are welcome.

Links

• Relay Modern documentation.
• Relay Modern examples.
• Original README.md file for this repo, now named DOCUMENTATION.md.

relay-starter-kit's Issues

Tutorial code not the same as repo

In the repo, ./data/database.js has class User {}and class Widget {}, but the tutorial is talking about export class Game {} export class HidingSpot {} in the same file

[email protected] does not satisfy its siblings' peerDependencies requirements

After git clone ..., npm install got error.

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!

unstable_batchedUpdates undefined, replaces batchUpdate function

Ran into this issue when working through the react-treasurehunt example on Windows.

injectBatchingStrategy in Relay's GraphQLStoreChangeEmitter.js was for some reason being called with an undefined parameter, causing no updates to occur.

I might be linked to this issue here: facebook/relay#127, but I'm just beginning with Relay/Webpack and have no idea.

I fixed it in my own solution by checking if the function is defined before replacing it.

injectBatchingStrategy: function injectBatchingStrategy(batchStrategy) {
    if(typeof batchStrategy != 'undefined' )
    {
        batchUpdate = batchStrategy;
    }
},

graphql server doesnt work

First I cloned then "npm install", and finally "npm run start". Everthing looks fine in terminal:

d-wisecom:relay-treasurehunt djackson$ npm start

babel-node ./server.js

[HPM] Proxy created: /graphql  ->  http://localhost:8080
GraphQL Server is now running on http://localhost:8080
App is now running on http://localhost:3000
Hash: 2eb077ffba31de14b3f7
Version: webpack 1.13.2
Time: 1651ms
 Asset     Size  Chunks             Chunk Names
app.js  1.59 MB       0  [emitted]  main
chunk    {0} app.js (main) 1.52 MB [rendered]
    [0] ./js/app.js 1.78 kB {0} [built]
    [1] ./js/components/App.js 8.55 kB {0} [built]
    [2] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
    [3] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
    [4] ./~/babel-runtime/core-js/object/define-property.js 103 bytes {0} [built]

......

  [476] ./~/react-relay/lib/RelayContainer.js 35.2 kB {0} [built]
  [477] ./~/react-relay/lib/RelayContainerComparators.js 2.64 kB {0} [built]
  [478] ./~/react-relay/lib/RelayContainerProxy.js 420 bytes {0} [built]
  [479] ./~/react-relay/lib/RelayOSSContainerProxy.js 582 bytes {0} [built]
  [480] ./~/react-relay/lib/isReactComponent.js 664 bytes {0} [built]
  [481] ./~/react-relay/lib/createRelayQuery.js 735 bytes {0} [built]
  [482] ./js/routes/AppHomeRoute.js 2.48 kB {0} [built]
webpack: Compiled successfully.

Yet when I go to localhost:8080/graphql in my browser I get 502 Bad Gateway. localhost:3000 definitely craps out since it cant find the graphql endpoint. Any idea why?

Windows 10 Module failed plugin 0

I downgrade to node 4 from node 7, but still wont work. I followed #93 still no solution, I want to learn relay :(

How to enable debugging? (database.js, schema.js)

Hi guys

Great work, but I can't figure out how to debug this.

I tried to find some guidance on the babel site, but still can't get debugging to work. (Using Node.JS Remote Debugging Server Side / databasejs, schema.js)

Can you please give a little documentation on how to debug it.

Thank you
Bernd

Nodes pagination is not working

I've forked this repo for adding pagination functionality to the Relay container.

I implemented in the same way as setVariables example suggest, however the repo is not working with the current changes: syrusakbary@75703bb

Here is the error I'm getting in the browsers console:

Uncaught Error: Invariant Violation: RelayQuery: Field `widgets` does not have an argument `after`.

sh: 1: babel-node: Permission denied

Hi,

I am new to es6 and relay.
I hit this error below when ran cmd npm start
I am not sure what is wrong with my env
Error:
sh: 1: babel-node: Permission denied

Document how to introspect the schema on an external graphql server

I'm trying to work out how I can configure my relay app to connect to a graphql server I've written using sangria (http://sangria-graphql.org/). Since graphql supports schema introspection I expect it should be possible for my relay app to connect to my server when it starts up to pull the schema down, but I can't work out how to make it do that.

I've got 2 questions:

1. Is this possible?
2. Is this a good idea, or is it recommended to pre-cache the schema in schema.json like with the example app in relay-starter-kit for performance, etc.?

Automate schema regeneration

Devise a system to watch the schema file for changes, regenerate the introspection, and make the new introspection product available to express-graphql.

How do we deploy the relay-starter-kit to production?

There is no documentation of what steps are needed to deploy the application which is developed using this starter kit. Can someone please share the steps involved here?
The only other option I could find is to use https://github.com/lvarayut/relay-fullstack instead.

Can't start the relay-starter-kit or run update-schema.

I'm running on Windows 10 with node v4.3.1 and npm v.2.14.2. I had this issue the other day, but got it working with a fresh install of the relay-starter-kit, but now it fails for both operations.

for start:
"Failed at the [email protected] start script 'babel-node ./server.js'.

for update schema:
"Failed at the [email protected] update-schema script 'babel-node ./scripts/updateSchema.js'.

it's possible to work with typescript

I think to work with js has more disadvantage

404 from http://localhost:3000/graphql.

I git cloned, npm installed, npm start, then opened http://localhost:3000. Nothing. I checked the console, and see the following

Yes, the graphql server is running (on 8080, and proxied to 3000/graphql):

npm install doesn't work

turns out it was a npm proxy problem.

Data updates not reflected unless restarting the app

Everything works perfectly except when the database.js file gets updated with new data, it's not reflected on the site unless I restart the app.

Notice in the gif below that when I edit database.js with why's it and then refresh the page, there are still only 3 pieces of data. Once I restart the app and then refresh the page, there are now 4 pieces of data.

Any idea what could be causing this or what I might be missing?

updateSchema error

Can't seem to be able to write simple query with my schema.

When running upadateSchema I always get Error: Ticket.id field type must be Output Type but got: [object Object].

I tried mimicking the one on the tutorial but to no avail

var queryType = new GraphQLObjectType({
  name: 'Query',
  fields: () => ({
    node: nodeField,
    ticket: {
      type: ticketType,
      resolve: () => getTicket(),
    }
  })
});

I must be missing something.

Thanks

Is there a way to deploy this?

Hey guys,

Everything related to generate a build is not well answered (#98 and #82).

Ok, this is not good for production - but what if I wanted to just run a build and deploy my stuff for testing purposes?

Was anybody able to do that? What steps does it take?

Does every List type need to be a Connection?

I'm trying to return a list of event items. My server correctly returns the following:

{"data":{"events":[{"id":"8","title":"Click 1"},{"id":"20","title":"View 2"}]}}

My component is only being provided with the first item in the list though, i.e. the event with ID 8, instead of the whole list. Here's my component:

class Event extends React.Component {
  render() {
    var this.props.events.map(...); // error because events is not a list but it should be
    return (
        <div>
          Title: {this.props.events.title}         // works but shouldn't
        </div>
    );
  }
}

export default Relay.createContainer(Event, {
  fragments: {
    events: () => Relay.QL`
      fragment on Event {
        id,
        title
      }
    `,
  },
});

And the route:

export default class extends Relay.Route {

  static queries = {
    events: Component => Relay.QL`
      query {
        events(id: $userID) {
          ${Component.getFragment('events')},
        },
      }
    `,
  };

  static paramDefinitions = {
    userID: {required: true},
  };

  static routeName = 'EventRoute';
}

Looking at the examples (todo, the one in relay-starter-kit) I can see that all of the list types are wrapped in Connection objects that provide metadata. Is this a requirement? I'd have expected the above to work and to be able to extend it in future by changing it to a Connection object when I needed to, instead of having to do it to begin with.

Network HTTP request ? babel-relay-plugin

please feel free to close this if it should be asked elsewhere.

i'm trying to modify the starter kit to reach an external server

https://www.graphqlhub.com/graphql

as per the doc iv'e modified the babel-relay-plugin
https://facebook.github.io/relay/docs/guides-babel-plugin.html

i'm getting

ReferenceError: [BABEL] Documents/relay/GiphyHub/js/app.js: Using removed Babel 5 option: base.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

all the babel modules are for 6?

any ideas for a work around ?

babel-relay-plugin.js

const fetch = require('node-fetch');
const fs = require('fs');
const {
  buildClientSchema,
  introspectionQuery,
  printSchema,
} = require('graphql/utilities');
const path = require('path');
const schemaPath = path.join(__dirname, 'schema');

const SERVER = 'https://www.graphqlhub.com/graphql';

// Save JSON of full schema introspection for Babel Relay Plugin to use
fetch(`${SERVER}`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({'query': introspectionQuery}),
}).then(res => res.json()).then(schemaJSON => {
  fs.writeFileSync(
    `${schemaPath}.json`,
    JSON.stringify(schemaJSON, null, 2)
  );

  // Save user readable type system shorthand of schema
  const graphQLSchema = buildClientSchema(schemaJSON.data);
  fs.writeFileSync(
    `${schemaPath}.graphql`,
    printSchema(graphQLSchema)
  );
});

Suggestion: add React, ReactDOM, and Relay imports

When I looked at the code it caught me off-guard. Importing React, ReactDOM, and Relay in the places they're used makes the code more explicit. Then again, I generally dislike non-language globals, so I'm definitely biased.

I stop the service, but it still works

I can also visit localhost:3000 after I stop it. Why for that?
Cache, cookie, service worker are all clear.

Running update-schema as part of npm start?

I think it would be beneficial to add npm run update-schema to the beginning of the npm start command. This avoids a command the user needs to type and guarantees the schema is updated before webpack processes any files. Thoughts?

Splitting out Relay and GraphQL using the Starter Kit

I tried to split out relay and graphql using the same starter kit for both and I get this error.

XMLHttpRequest cannot load http://localhost:9000/graphql. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4000' is therefore not allowed access. The response had HTTP status code 405.

Here is the code of the relay file ./js/app.js that is running on port 4000.

import 'babel-polyfill';
import App from './components/App';
import AppHomeRoute from './routes/AppHomeRoute';
import React from 'react';
import ReactDOM from 'react-dom';
import Relay, { DefaultNetworkLayer, RootContainer } from 'react-relay';

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:9000/graphql', {
    credentials: 'same-origin'
  })
);

ReactDOM.render(
  <RootContainer
    Component={App}
    route={new AppHomeRoute()}
  />,
  document.getElementById('root')
);

Relay is serving at port 4000 and graphql at port 9000. I was wondering if you could tell me whether I am injecting the network layer wrong or if it is another issue.

Testing Support?

It's disappointing not to see a test harness considered a first class citizen of a 'quick start' project.

How different between using GraphQL middleware and proxy?

I saw some projects setting the GraphQL as middleware of a created Express server as following:

// GraphQL is just a middleware of the relay app
app.use('/graphql', GraphQLHTTP({
    schema,
   graphiql: true
}));

On the other hand, this starter kit is setting up a GraphQL server and using proxy to redirect all /graphql requests to the running GraphQL server:

// Create GraphQL server separately from the relay app
var graphQLServer = express();
graphQLServer.use('/', graphQLHTTP({
  graphiql: true,
  pretty: true,
  schema: Schema,
}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

var app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}
});

Do these methods give the same result? Is there any difference between them? Thanks in advance for your help.

when I fetch the added data,throw error

I extended the schema.js,added some new graphqlTypes and fields,when I try to fetch my own fields(posts),the SYS throw the ERROR below and proccess break off;
"RelayOSSNodeInterface: Expected payload for root field posts to be a single non-array result, instead received an array with 9 results."

how could i do ?thank you

Question: babel-relay-plugin error while doing npm install

Hello, I'm trying to get started with relay.
As usual, I cloned the repo and then run npm install. After a while, the download finished but with a warning:
npm WARN EPEERINVALID [email protected] requires a peer of [email protected] but none was installed.

My first guess is the download was corrupted because a bad internet connection. I tried to run npm install again, but the same warning occured.

Since it is only a warning, do I need to be concerned with it? If it is actually a problem, how can I fix it?

Btw, I'm not sure if here is the right place to ask this kind of question. If this kind of post is not appropriate here, where is the better place to ask?

Missing documentation makes starter-kit unsuitable to start out from

Hello
I started out with the relay-starter-kit and also worked my way through the Relay and GraphQL documentation. But there are quite a few areas that are unexplained and mysterious.

Seriously I read a lot of documentations everywhere about all these things but couldn't find any satisfying explanations for the following questions:

What is this for? I put logging but it never even gets called at all:

var {nodeInterface, nodeField} = nodeDefinitions(
  (globalId) => {
    var {type, id} = fromGlobalId(globalId);
    if (type === 'User') {
      return getUser(id);
    } else if (type === 'Widget') {
      return getWidget(id);
    } else {
      return null;
    }
  },
  (obj) => {
    if (obj instanceof User) {
      return userType;
    } else if (obj instanceof Widget) {
      return widgetType;
    } else {
      return null;
    }
  }
);

And what is the actual effect of this:

interfaces: [nodeInterface],

Maybe related to that, what does the node field here do:

var queryType = new GraphQLObjectType({
  name: 'Query',
  fields: () => ({
    node: nodeField,
    // Add your own root fields here
    viewer: {
      type: userType,
      resolve: () => getViewer(),
    },
  }),
});

And what is the magic around the id field? What is globalIdField for?

I have an id in my database and thought I could use it in my GraphQL objects:

Instead of:

id: globalIdField('User'),

I want to use my database id:

id: {
      type: GraphQLID,
      description: 'The identifier'
    },

But if I do that I get an error in the browser saying RelayQueryWriter: Could not find a type name for record '1'.

I can get rid of that error by adding __typename to my component containers Relay Query but that seems all wrong.

It would be great if you could give some deeper insides and a better explanation here and enhance the official documentation.

I asked the same on Stack Overflow

Thank you

JSON.parse: unexpected character at line 1 column 1 of the JSON data

After cloning and running npm install/npm start I get the following error in the Firefox dev tools console:

10:40:22.354 JSON.parse: unexpected character at line 1 column 1 of the JSON data app.js:42262:6

Nothing is displayed on the page in Firefox (41.0.2).

In chromium a list of three widgits are displayed.

schema.json and package.json are the only JSON files in the project and both appear correct, line 1 column 1 in each being "{".

Understanding AppHomeRoute.js

Hi I am trying to understand AppHomeRoute.js

export default class extends Relay.Route {
static path = '/';
static queries = {
viewer: (Component) => Relay.QLquery { viewer { ${Component.getFragment('viewer')}, }, },
};
static routeName = 'AppHomeRoute';
}

There are 3 viewer in this coding.

1. viewer Component
2. query viewer
3. fragment viewer

I tried the query viewer, if I want to change this part, then I will need to change the schema.js ... where it define GraphQLObjType ... viewer.....

I am trying to change the Fragment viewer to another name, and then subsequently change the same name in Containter-fragments and it doesn't work.

1. Can you explain what is the relation between this 3 viewer in this coding, and where does it relate to?
2. in the component, we also use this.props.viewer... is the Viewer here must match the name of fragment?

Thanks

Provide .flowconfig

Could you provide a working and optimized .flowconfig-file? With my current config (see attached) a simple flow check takes pretty long (around 25 seconds on a my shitty laptop). Adding .*/node_modules/* to the config causes flow to no longer find the modules graphql neither graphql-relay, even if I explicitly add those to the [include]ed-path.

[ignore]
.*/__tests__/.*
.*/react/node_modules/.*
.*/react-relay/node_modules/.*
.*/react-static-container/node_modules/.*

[include]
./node_modules/react
./node_modules/react/node_modules/fbjs/flow/include
./node_modules/react/node_modules/fbjs/node_modules/promise
./node_modules/react-relay/node_modules/react-static-container/lib

[libs]
./node_modules/react/node_modules/fbjs/flow/lib

[options]

Could you make it log the graphql queries to the console for debugging?

It's very difficult to figure out exactly what queries Relay is synthesizing for me. If the server would log them to the console, it would be much easier to debug things.

npm start does not work

Hello,

I have this issue when trying to start this kit :

> [email protected] start D:\appli\node\relay-starter-kit
> babel-node ./server.js

GraphQL Server is now running on http://localhost:8080

App is now running on http://localhost:3000
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.12.13
Time: 1349ms

ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in "D:\\appli\\node\\relay-starter-kit\\node_modules\\babel-preset-react\\index.js" provi
ded an invalid property of "_c"
    at Plugin.init (D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\plugin.js:127:13)
    at Function.normalisePlugin (D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manager.
js:176:12)
    at D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manager.js:210:30
    at Array.map (native)
    at Function.normalisePlugins (D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manager
.js:182:20)
    at OptionManager.mergeOptions (D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manage
r.js:298:36)
    at D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manager.js:318:17
    at D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-manager.js:390:24
    at Array.map (native)
    at OptionManager.resolvePresets (D:\appli\node\relay-starter-kit\node_modules\babel-core\lib\transformation\file\options\option-mana
ger.js:385:20)
webpack: bundle is now VALID.

Improvement: Add mutations example

Would be very nice to have functional example of writing back into schema as part of starter kit. At the moment info about mutations is scattered around, and it's hard to oversee everything that is required to get minimalistic mutation working.

build fails

hello. i'm trying to build the example that ships with this repo and getting the following namespace collision for the camelize package:

Error building DependencyGraph:
 Error: Naming collision detected: ~/react/react-native-relay/node_modules/react/node_modules/fbjs/lib/camelize.js collides with ~/react/react-native-relay/node_modules/react-native/node_modules/fbjs/lib/camelize.js
    at HasteMap._updateHasteMap (HasteMap.js:132:13)
    at HasteMap.js:103:28
    at tryCallOne (/Users/206603/Sites/FUN/react/react-native-relay/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/206603/Sites/FUN/react/react-native-relay/node_modules/react-native/node_modules/promise/lib/core.js:123:15
    at flush (/Users/206603/Sites/FUN/react/react-native-relay/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
    at nextTickCallbackWith0Args (node.js:415:9)
    at process._tickCallback (node.js:344:13)

Server failed at 'babel-node ./server.js'

My npm-debug log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files (x86)\nodejs\node.exe',
1 verbose cli 'C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: babel-node ./server.js
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess. (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd C:\Users\Polisander\Code\miles-relay
12 error Windows_NT 6.3.9600
13 error argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "start"
14 error node v0.12.5
15 error npm v2.11.2
16 error code ELIFECYCLE
17 error [email protected] start: babel-node ./server.js
17 error Exit status 1
18 error Failed at the [email protected] start script 'babel-node ./server.js'.
18 error This is most likely a problem with the relay-starter-kit package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error babel-node ./server.js
18 error You can get their info via:
18 error npm owner ls relay-starter-kit
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

npm start fails with "ERROR in ./js/app.js"

Everything used to work even a few days ago but i am guessing something changed in the node/nmp packages and now there is this error

(complete output beginning with clone here http://pastebin.com/Gjkbn7UU)

± |master ✓| → npm start

> [email protected] start /tmp/relay-starter-kit
> babel-node ./server.js


> [email protected] update-schema /tmp/relay-starter-kit
> babel-node ./scripts/updateSchema.js


GraphQL server is now running on http://localhost:8080
App is now running on http://localhost:3000
Hash: af279ae28561136eb0fa
Version: webpack 1.13.1
Time: 49ms

ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in "foreign" provided an invalid property of "_c"
    at Plugin.init (/tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/plugin.js:138:13)
    at Function.normalisePlugin (/tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:147:12)
    at /tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:181:30
    at Array.map (native)
    at Function.normalisePlugins (/tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:153:20)
    at OptionManager.mergeOptions (/tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:245:36)
    at /tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:254:17
    at /tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:342:20
    at Array.map (native)
    at OptionManager.resolvePresets (/tmp/relay-starter-kit/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)
webpack: bundle is now VALID.

i confirmed the error also with another person with a clean system

Error when trying to run update-schema

Hi, I started working on a simple app using the starter kit, following the todo example in the official Relay repo, but have been stuck on one issue for the last few hours. First, I edited my database.js and schema.js files. When trying to run npm run update-schema I am getting an error:

ERROR:  [
  {
    "message": "Cannot return null for non-nullable type.",
    "locations": [
      {
        "line": 32,
        "column": 7
      }
    ]
  }
]

Looking at my schema.js file I cannot figure out where the issue is. Perhaps I am missing something?

Here is a link to my database.js and schema.js.

Any tips or point to a direction would be greatly appreciated! Thanks!

Upgrade to Babel 6

I used this starter kit as a basis for my own project, and I'm having some issues upgrading Babel to version 6. It would be really helpful to see how the configuration has changed, specifically around using 'babel-node' and the new plugins/presets for Babel 6.

throw new Error("The (" + alias + ") Babel 5 plugin is being run with Babel 6.");

getting this

throw new Error("The (" + alias + ") Babel 5 plugin is being run with Babel 6.");

Error: The (relay-query) Babel 5 plugin is being run with Babel 6.

possibly due to this
facebook/relay#887

npm start error with babel 5.x

Just a tip, if an old version of babel was installed globally before. npm start may meet errors. use

npm install -g babel-core

to install the newest babel.

npm install -g babel-cli

if you need the command line tools of babel

Error after install with npm start

I installed the kit using npm install. I then ran npm start and got this:

ERROR in ./js/components/App.js
Module build failed: Error: C:/Users/TestUser/relay-starter-kit/js/components/
App.js: Mutation fields must be an object with field names as keys or a function
which returns such an object.

babel-node has issue with `instanceof` and subclasses

Referencing to this SO post, babel-node has issue with instanceof and subclasses.

This might not be an issue most of the time, but it breaks the fresh state of Relay Starter Kit. For example, the following query does not work as expected

Add production build

How do I make production build from this?

react-relay not working with decorated components ?

Hello

I tried to integrate relay into this react-starter-kit but it seems to be incompatible with the decorators.

I changed the ContactPage to use relay taken from the relay-starter-kit see below.

But I get the following errors in Chrome when I navigate to it:

Unhandled promise rejection Error: Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `Relay.QL`.

In the compiled app.js bundle I can definitely see that the babelRelayPlugin compiled the Relay Query!

I added it to the webpack config.js like this:

const JS_LOADER = {
  test: /\.jsx?$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-routing/src'),
    path.resolve(__dirname, '../src'),
  ],
  loader: 'babel-loader',
  query: {stage: 0, plugins: ['../tools/lib/babelRelayPlugin']}
};

And in routes.js I changed it to this:

on('/contact', async () => (<Relay.RootContainer Component={ContactPage} route={new ContactRoute()} />));

Is this a known limitation, or is there a way to use relay in this starter-kit design?

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes, Component } from 'react';
import Relay from 'react-relay';
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ContactPage extends Component {

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  render() {
    const title = 'Contact Us';
    this.context.onSetTitle(title);
    return (
      <div className="ContactPage">
        <div className="ContactPage-container">
          <h1>{title}</h1>
          <p>...</p>
        </div>
        <h1>Widget list</h1>
        <ul>
          {this.props.viewer.widgets.edges.map(edge =>
              <li>{edge.node.name} (ID: {edge.node.id})</li>
          )}
        </ul>
      </div>
    );
  }

}

// export default ContactPage;

export default Relay.createContainer(ContactPage, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widgets(first: 10) {
          edges {
            node {
              id,
              name,
            },
          },
        },
      }
    `,
  },
});

Repeated errors when trying to update schema

Hello,

I can not get my (modified) schema to update with npm run update-schema

I keep getting the following error:

/home/dsifford/repos/AU-2/node_modules/graphql/utilities/schemaPrinter.js:58
  var typeMap = schema.getTypeMap();
                      ^

TypeError: Cannot read property 'getTypeMap' of undefined

Any ideas?

Error when 'npm start'

Hi all,

I got this error when I tried to run this repo.

Can anyone help me to fix it?

javascript
ERROR in ./js/routes/AppHomeRoute.js
Module build failed: SyntaxError: /Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/js/routes/AppHomeRoute.js: Unexpected token (4:17)
2 |
3 | export default class extends Relay.Route {

4 | static queries = {
| ^
5 | viewer: () => Relay.QL`
6 | query {
7 | viewer
at Parser.pp.raise (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseClassProperty (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:624:61)
at Parser.parseClassProperty (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:797:20)
at Parser.pp.parseClass (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:567:32)
at Parser.pp.parseExprAtom (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:405:19)
at Parser.parseExprAtom (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
at Parser.pp.parseExprSubscripts (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/Users/khanghoangtrieu/Documents/Sandbox/relay-starter-kit/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
@ ./js/app.js 11:26-58
webpack: bundle is now VALID.

Errors running examples - todo mvc

TL/DR:
The README in the todo example folder is incorrect. Here's what I had to do to get it running. NOTE: this assumes the relay-master folder is in your home directory. You'll need to edit the path if you put it somewhere else.

1. cd ~/relay-master; npm install
2. cd ~/relay-master/scripts/babel-relay-plugin; npm install
3. cd ~/relay-master/examples/todo; npm install
4. npm start

Additional info:
The README in the "todo" example say: "## Installation npm install ## Running Start a local server: ``` npm start". Unfortunately, that results in:

Error: Cannot find module 'babel-core'.

To get the running I needed to:

1. cd ~/relay-master; npm install

After this tried "cd ~/relay-master/examples/todo; npm install", but got:

babelAdapter.js: Unknown option: relay-master/scripts/babel-relay-plugin/.babelrc.presets

Next:

1. cd ~/relay-master/scripts/babel-relay-plugin; npm install

Finally

1. cd ~/relay-master/examples/todo; npm install
2. npm start

npm install problem

I get this error while running npm install on the project...anybody can help me fix it?

➜  relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40  npm install
npm WARN peerDependencies The peer dependency graphql@~0.2.6 included from express-graphql will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency babel-core@* included from babel-loader will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

[email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/babel/node_modules/chokidar/node_modules/fsevents
node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

[email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/engine.io/node_modules/ws/node_modules/utf-8-validate
node-gyp rebuild

  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node

[email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/engine.io/node_modules/ws/node_modules/bufferutil
node-gyp rebuild

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node

[email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents
node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

 [email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/utf-8-validate
node-gyp rebuild

  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node

[email protected] install /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/bufferutil
node-gyp rebuild

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.26
npm ERR! npm  v2.14.1
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/niko/Downloads/relay-starter-kit-37f1d13613db732b2d924a55cecf89c255ce0f40/npm-debug.log