reactjsgraphqlreact-relayisomorphic-relay

Multiple pages using relay-modern-isomorphic

I followed this relay-modern-isomorphic-example tutorial : Link

In that tutorial they have a single page with no routing ,

import express from 'express';
import graphQLHTTP from 'express-graphql';
import nunjucks from 'nunjucks';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {schema} from './data/schema';
import renderServer from './js/renderServer';
import renderServer2 from './js/renderServer2';
const APP_PORT = 3000;
const GRAPHQL_PORT = 8080;

// Expose a GraphQL endpoint
const graphQLServer = express();
graphQLServer.use('/', graphQLHTTP({schema, pretty: true}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

// Serve the Relay app
const compiler = webpack({
  entry: path.resolve(__dirname, 'js', 'app.js'),
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.js$/,
      },
    ],
  },
  output: {filename: 'app.js', path: '/'},
  devtool: 'source-map'
});

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

nunjucks.configure('views', {autoescape: true});

// Serve static resources
app.use('/public', express.static(path.resolve(__dirname, 'public')));
app.use('/', renderServer);
app.use('/detailComponent', renderServer2);
app.listen(APP_PORT, () => {
  console.log(`App is now running on http://localhost:${APP_PORT}`);
});

In the above code by default it lands on localhost:3000, likewise i want to add another page with url localhost:3000/detailComponent . But it will showing me the localhost:3000 page only . So how to do the routing here , can someone clarify me on this .

Solution

  • You need to swap the order of the two routes.

    When you call app.use you're creating middleware, which behaves differently from the method functions like get or post. You can read the docs for more details, but here's what's effectively happening: For middleware (but not get, post, etc.) / will match every route, and because that middleware is defined before /detailComponent in your code, it's triggering even when the route is /detailComponent.

    That said, if you're implementing SSR and implementing multiple routes, you should probably look into routing everything to one endpoint in express and letting a library like React Router take care of the rest. There's plenty of tutorials out there that show how to do that; here's just one.