Add support for query string parameters

Query string parameters are now passed to the nextRouter Netlify
function. This means that they are now accessible in getInitialProps()
via the query parameter.

Fixes #9.

Author: FinnWoelm

cypress/fixtures/pages/shows/[...params].js

@@ -2,7 +2,7 @@ import fetch from 'isomorphic-unfetch'
 import Error from 'next/error'
 import Link from 'next/link'
 
-const CatchAll = ({ errorCode, show, params }) => {
+const CatchAll = ({ errorCode, show, params, queryStringParams }) => {
 
   // If show item was not found, render 404 page
   if (errorCode) {
@@ -22,13 +22,28 @@ const CatchAll = ({ errorCode, show, params }) => {
             [{index}]: {param}<br/>
           </span>
         ))}
-        <br/>
+      </p>
+
+      <p>
         Refresh the page to see server-side rendering in action.
         <br/>
         You can also try changing the URL to something random,
         such as /shows/{show.id}/whatever/path/you/want
       </p>
 
+      <p>
+        You can also use query string parameters, for example:
+        /shows/{show.id}/whatever/path/you/want?search=dog
+        <br/>
+        If you do, they will show up below:
+        <br/>
+        {Object.keys(queryStringParams).map(key => (
+          <span key={key}>
+            [{key}]: {queryStringParams[key]}<br/>
+          </span>
+        ))}
+      </p>
+
       <hr/>
 
       <h1>Show #{show.id}</h1>
@@ -46,8 +61,8 @@ const CatchAll = ({ errorCode, show, params }) => {
 }
 
 CatchAll.getInitialProps = async ({ res: req, query }) => {
-  // Get the params to render
-  const { params } = query
+  // Get the params and query parameters to render
+  const { params, ...queryStringParams } = query
 
   // Get the ID to render
   const id = params[0]
@@ -59,7 +74,7 @@ CatchAll.getInitialProps = async ({ res: req, query }) => {
   // Set error code if show item could not be found
   const errorCode = res.status > 200 ? res.status : false
 
-  return { errorCode, show: data, params }
+  return { errorCode, show: data, params, queryStringParams }
 }
 
 export default CatchAll

cypress/integration/default_spec.js

@@ -83,28 +83,38 @@ describe('dynamic SSR page', () => {
 })
 
 describe('dynamic catch-all SSR page', () => {
-  it('displays all URL parameters', () => {
-    cy.visit('/shows/94/this-is-all/being/captured/yay')
+  it('displays all URL parameters, including query string parameters', () => {
+    cy.visit('/shows/94/this-is-all/being/captured/yay?search=dog&custom-param=cat')
 
+    // path parameters
     cy.get('p').should('contain', '[0]: 94')
     cy.get('p').should('contain', '[1]: this-is-all')
     cy.get('p').should('contain', '[2]: being')
     cy.get('p').should('contain', '[3]: captured')
     cy.get('p').should('contain', '[4]: yay')
 
+    // query string parameters
+    cy.get('p').should('contain', '[search]: dog')
+    cy.get('p').should('contain', '[custom-param]: cat')
+
     cy.get('h1').should('contain', 'Show #94')
     cy.get('p').should('contain',  'Defiance')
   })
 
-  it('displays all URL parameters when SSR-ing', () => {
-    cy.visit('/shows/94/this-is-all/being/captured/yay')
+  it('displays all URL parameters when SSR-ing, including query string parameters', () => {
+    cy.visit('/shows/94/this-is-all/being/captured/yay?search=dog&custom-param=cat')
 
+    // path parameters
     cy.get('p').should('contain', '[0]: 94')
     cy.get('p').should('contain', '[1]: this-is-all')
     cy.get('p').should('contain', '[2]: being')
     cy.get('p').should('contain', '[3]: captured')
     cy.get('p').should('contain', '[4]: yay')
 
+    // query string parameters
+    cy.get('p').should('contain', '[search]: dog')
+    cy.get('p').should('contain', '[custom-param]: cat')
+
     cy.get('h1').should('contain', 'Show #94')
     cy.get('p').should('contain',  'Defiance')
   })

lib/routerTemplate.js

@@ -46,8 +46,8 @@ exports.handler = (event, context, callback) => {
       ...event,
       // Required. Otherwise, compat() will complain
       requestContext: {},
-      // Optional: Pass additional parameters to NextJS
-      multiValueQueryStringParameters: {}
+      // Pass query string parameters to NextJS
+      multiValueQueryStringParameters: event.queryStringParameters
     },
     context,
     callback