From 0fc00567b71a44f1ae4bff227c058de0af5249be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans-J=C3=B8rgen=20Vedvik?= <hjvedvik@gmail.com>
Date: Mon, 16 Sep 2019 14:32:59 +0200
Subject: [PATCH] fix(graphql): update variables when query changes

---
 gridsome/lib/pages/__tests__/pages.spec.js |  7 ++--
 gridsome/lib/pages/pages.js                | 39 +++++++++++++---------
 gridsome/lib/server/middlewares/graphql.js |  2 +-
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/gridsome/lib/pages/__tests__/pages.spec.js b/gridsome/lib/pages/__tests__/pages.spec.js
index a19e5b4d7..9b7ea414a 100644
--- a/gridsome/lib/pages/__tests__/pages.spec.js
+++ b/gridsome/lib/pages/__tests__/pages.spec.js
@@ -139,7 +139,7 @@ test('create page with pagination', async () => {
   expect(route.path).toEqual('/page/:page(\\d+)?/')
   expect(route.internal.path).toEqual('/page')
   expect(route.internal.regexp).toEqual(/^\/page(?:\/(\d+))?(?:\/)?$/i)
-  expect(route.internal.query.paginate).toEqual(true)
+  expect(route.internal.query.directives).toHaveProperty('paginate')
 })
 
 test('create page with custom context', async () => {
@@ -161,14 +161,17 @@ test('create page with query context', async () => {
     })
   })
 
+  const queryVariables = { id: '1' }
+
   const page = pages.createPage({
     path: '/page',
     component: './__fixtures__/MovieTemplate.vue',
-    queryVariables: { id: '1' }
+    queryVariables
   })
 
   expect(page.context).toMatchObject({})
   expect(page.internal.query.variables).toMatchObject({ id: '1' })
+  expect(page.internal.queryVariables).toEqual(queryVariables)
 })
 
 test('always include a /404 page', async () => {
diff --git a/gridsome/lib/pages/pages.js b/gridsome/lib/pages/pages.js
index f27da9e73..773c3fe1c 100644
--- a/gridsome/lib/pages/pages.js
+++ b/gridsome/lib/pages/pages.js
@@ -127,15 +127,29 @@ class Pages {
     )
 
     const options = this._createRouteOptions(validated, meta)
-    const route = this._routes.by('id', options.id)
+    const oldOptions = this._routes.by('id', options.id)
     const newOptions = Object.assign({}, options, {
-      $loki: route.$loki,
-      meta: route.meta
+      $loki: oldOptions.$loki,
+      meta: oldOptions.meta
     })
 
     this._routes.update(newOptions)
 
-    return new Route(newOptions, this)
+    const route = new Route(newOptions, this)
+
+    if (options.internal.query.source !== oldOptions.internal.query.source) {
+      for (const page of route.pages()) {
+        const vars = page.internal.queryVariables || page.context || {}
+        const { paginate, variables, filters } = this._createPageQuery(route.internal.query, vars)
+
+        const newOptions = { ...page }
+        newOptions.internal.query = { paginate, variables, filters }
+
+        this._pages.update(newOptions)
+      }
+    }
+
+    return route
   }
 
   removeRoute (id) {
@@ -273,8 +287,7 @@ class Pages {
   _createRouteOptions (options, meta = {}) {
     const component = this.app.resolve(options.component)
     const { pageQuery } = this._parseComponent(component)
-    const parsedQuery = this._parseQuery(pageQuery, component)
-    const { source, document, paginate } = this._createPageQuery(parsedQuery)
+    const query = this._parseQuery(pageQuery, component)
     const { permalinks: { trailingSlash }} = this.app.config
 
     let path = options.path.replace(/\/+/g, '/')
@@ -289,7 +302,7 @@ class Pages {
       name = name || `__${snakeCase(path)}`
     }
 
-    if (paginate) {
+    if (query.directives.paginate) {
       path = trimEnd(path, '/') + '/:page(\\d+)?' + (hasTrailingSlash ? '/' : '')
     }
 
@@ -314,12 +327,8 @@ class Pages {
         isDynamic,
         priority,
         regexp,
-        keys,
-        query: {
-          source,
-          document,
-          paginate: !!paginate
-        }
+        query,
+        keys
       })
     })
   }
@@ -495,8 +504,7 @@ class Route {
     }
 
     const vars = queryVariables || context || {}
-    const parsedQuery = this._factory._parseQuery(query.source, this.component)
-    const { paginate, variables, filters } = this._factory._createPageQuery(parsedQuery, vars)
+    const { paginate, variables, filters } = this._factory._createPageQuery(query, vars)
 
     return this._createPage.call({
       id,
@@ -504,6 +512,7 @@ class Route {
       publicPath,
       context,
       internal: {
+        queryVariables,
         route: this.id,
         digest,
         isManaged,
diff --git a/gridsome/lib/server/middlewares/graphql.js b/gridsome/lib/server/middlewares/graphql.js
index 4a94a4614..ab70bfce2 100644
--- a/gridsome/lib/server/middlewares/graphql.js
+++ b/gridsome/lib/server/middlewares/graphql.js
@@ -36,7 +36,7 @@ module.exports = ({ pages }) => {
 
     // page/1/index.html is not statically generated
     // in production and should return 404 in develop
-    if (route.internal.query.paginate) {
+    if (route.internal.query.directives.paginate) {
       currentPage = parseInt(params.page, 10) || 0
 
       if (params.page && currentPage <= 1) {