Make things simpler (kriasoft#1524)

src/client.js

@@ -58,14 +58,13 @@ async function onLocationChange(location, action) {
 
   const isInitialRender = !action;
   try {
+    context.pathname = location.pathname;
+    context.query = queryString.parse(location.search);
+
     // Traverses the list of routes in the order they are defined until
     // it finds the first route that matches provided URL path string
     // and whose action method returns anything other than `undefined`.
-    const route = await router.resolve({
-      ...context,
-      pathname: location.pathname,
-      query: queryString.parse(location.search),
-    });
+    const route = await router.resolve(context);
 
     // Prevent multiple page renders during the routing process
     if (currentLocation.key !== location.key) {
@@ -141,6 +140,7 @@ async function onLocationChange(location, action) {
 
     // Do a full page reload if error occurs during client-side navigation
     if (!isInitialRender && currentLocation.key === location.key) {
+      console.error('RSK will reload your page after error');
       window.location.reload();
     }
   }

src/components/App.js

@@ -16,6 +16,8 @@ const ContextType = {
   insertCss: PropTypes.func.isRequired,
   // Universal HTTP client
   fetch: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  query: PropTypes.object,
 };
 
 /**

src/server.js

@@ -15,7 +15,7 @@ import expressJwt, { UnauthorizedError as Jwt401Error } from 'express-jwt';
 import { graphql } from 'graphql';
 import expressGraphQL from 'express-graphql';
 import jwt from 'jsonwebtoken';
-import fetch from 'node-fetch';
+import nodeFetch from 'node-fetch';
 import React from 'react';
 import ReactDOM from 'react-dom/server';
 import PrettyError from 'pretty-error';
@@ -115,29 +115,32 @@ app.get('*', async (req, res, next) => {
   try {
     const css = new Set();
 
+    // Enables critical path CSS rendering
+    // https://github.com/kriasoft/isomorphic-style-loader
+    const insertCss = (...styles) => {
+      // eslint-disable-next-line no-underscore-dangle
+      styles.forEach(style => css.add(style._getCss()));
+    };
+
+    // Universal HTTP client
+    const fetch = createFetch(nodeFetch, {
+      baseUrl: config.api.serverUrl,
+      cookie: req.headers.cookie,
+      schema,
+      graphql,
+    });
+
     // Global (context) variables that can be easily accessed from any React component
     // https://facebook.github.io/react/docs/context.html
     const context = {
-      // Enables critical path CSS rendering
-      // https://github.com/kriasoft/isomorphic-style-loader
-      insertCss: (...styles) => {
-        // eslint-disable-next-line no-underscore-dangle
-        styles.forEach(style => css.add(style._getCss()));
-      },
-      // Universal HTTP client
-      fetch: createFetch(fetch, {
-        baseUrl: config.api.serverUrl,
-        cookie: req.headers.cookie,
-        schema,
-        graphql,
-      }),
-    };
-
-    const route = await router.resolve({
-      ...context,
+      insertCss,
+      fetch,
+      // The twins below are wild, be careful!
       pathname: req.path,
       query: req.query,
-    });
+    };
+
+    const route = await router.resolve(context);
 
     if (route.redirect) {
       res.redirect(route.status || 302, route.redirect);