diff --git a/src/client.js b/src/client.js index fec96fcda..e35a71b7b 100644 --- a/src/client.js +++ b/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(); } } diff --git a/src/components/App.js b/src/components/App.js index 709a94761..f20711f26 100644 --- a/src/components/App.js +++ b/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, }; /** diff --git a/src/server.js b/src/server.js index 64ddf189e..aa620f7fe 100644 --- a/src/server.js +++ b/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);