Make relay-fullstack connect with graphene-django

relay-fullstack_graphene-django.md

Make relay-fullstack work with the graphene-django graphql server

• relay-fullstack: https://github.com/lvarayut/relay-fullstack

React, Relay, webpack. Includes express-graphql server which you will need to turn off in favor of the django one.

• graphene-django: https://github.com/graphql-python/graphene-django

Solid ORM migrations, easy configuration of a full graphql server using your django models.

django

Set a path where the schema should be dumped to in your settings:

# settings.py
GRAPHENE = {
    'SCHEMA': 'mattermind.schema.schema',
    'SCHEMA_OUTPUT': 'frontend/schema.json'
}

Dump the schema from django anytime you make changes:

./manage.py graphql_schema

Make the graphql view CSRF exempt:

# urls.py
from django.conf.urls import url
from django.contrib import admin
from graphene_django.views import GraphQLView
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^graphql', csrf_exempt(GraphQLView.as_view(graphiql=True)))
]

relay-fullstack

Edit server/index.js and comment out or delete the graphql server.

  // Launch GraphQL
  // const graphql = express();
  // graphql.use('/', graphQLHTTP({
  //   graphiql: true,
  //   pretty: true,
  //   schema
  // }));
  // graphql.listen(config.graphql.port, () => console.log(chalk.green(`GraphQL is listening on port ${config.graphql.port}`)));

// but keep the proxy through to 8000 (which will now be served by django)
  // Launch Relay by using webpack.config.js
  const relayServer = new WebpackDevServer(webpack(webpackConfig), {
    contentBase: '/build/',
    proxy: {
      '/graphql': `http://localhost:${config.graphql.port}`
    },
    stats: {
      colors: true
    },
    hot: true,
    historyApiFallback: true
  });

Change the babelRelayPlugin.js so that it loads the dumped schema.json rather than server/data/schema.json

var jsonFile = path.join(__dirname, '../../schema.json');

(I keep mine at the top level of my frontend app)

This means that your graphql fragments will be validated and will throw compile errors with helpful messages.

Change package.json start command as you don't need or want to dump the schema

    "start": "./node_modules/.bin/babel-node server/index.js",

Now you can run django and then express:

./manage.py runserver

npm run start

If you are starting with the generated app you will see lots of schema validation errors until you rip all that out and build your own app against your django schema.

You can remove server/ entirely but move the babelRelayPlugin.js to somewhere, you'll want that still.