From e277bb284b278693756deb06bae104101a289f54 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 12 Feb 2021 11:55:27 +0000
Subject: [PATCH] fix(vue-app): align client fetch key with server (#8809)

---
 packages/vue-app/template/mixins/fetch.client.js |  2 +-
 packages/vue-app/template/mixins/fetch.server.js |  2 +-
 test/e2e/fetch.browser.test.js                   | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/vue-app/template/mixins/fetch.client.js b/packages/vue-app/template/mixins/fetch.client.js
index ea8ed615b8..5babfda58f 100644
--- a/packages/vue-app/template/mixins/fetch.client.js
+++ b/packages/vue-app/template/mixins/fetch.client.js
@@ -72,7 +72,7 @@ function createdFullStatic() {
     this._fetchKey = this.$options.fetchKey.call(this, getCounter)
   } else {
     const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
-    this._fetchKey = key + ':' + getCounter(key)
+    this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
   }
 
   const data = this.<%= globals.nuxt %>._pagePayload.fetch[this._fetchKey]
diff --git a/packages/vue-app/template/mixins/fetch.server.js b/packages/vue-app/template/mixins/fetch.server.js
index 68929625d7..a8844d15b5 100644
--- a/packages/vue-app/template/mixins/fetch.server.js
+++ b/packages/vue-app/template/mixins/fetch.server.js
@@ -54,7 +54,7 @@ export default {
       this._fetchKey = this.$options.fetchKey.call(this, getCounter)
     } else {
       const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
-      this._fetchKey = key + getCounter(key)
+      this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
     }
 
     // Added for remove vue undefined warning while ssr
diff --git a/test/e2e/fetch.browser.test.js b/test/e2e/fetch.browser.test.js
index dbd4830fe5..75863ba7f9 100644
--- a/test/e2e/fetch.browser.test.js
+++ b/test/e2e/fetch.browser.test.js
@@ -81,7 +81,7 @@ describe('basic browser', () => {
     const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
     expect(fetchKeys).toEqual([
       '0',
-      'DefaultLayout0'
+      'DefaultLayout:0'
     ])
     expect(await page.$text('div')).toContain('foo-bar-baz')
     expect(await page.$text('div')).toContain('fizz-buzz')
@@ -95,7 +95,7 @@ describe('basic browser', () => {
     const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
     expect(fetchKeys).toEqual([
       '0',
-      'DefaultLayout0'
+      'DefaultLayout:0'
     ])
     expect(await page.$text('div')).toContain('foo-bar-baz')
     expect(await page.$text('div')).toContain('fizz-buzz')
@@ -108,7 +108,7 @@ describe('basic browser', () => {
     const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
     expect(fetchKeys).toEqual([
       '0',
-      'DefaultLayout0',
+      'DefaultLayout:0',
       'ie0'
     ])
     expect(await page.$text('button')).toContain('has fetch')
@@ -120,10 +120,10 @@ describe('basic browser', () => {
     const fetchKeys = await page.evaluate(() => Object.keys(window.__NUXT__.fetch))
     expect(fetchKeys).toEqual([
       '0',
-      'DefaultLayout0',
-      'team0'
+      'DefaultLayout:0',
+      'team:0'
     ])
-    const team = await page.evaluate(() => window.__NUXT__.fetch.team0.team)
+    const team = await page.evaluate(() => window.__NUXT__.fetch['team:0'].team)
     expect(team.includes('Atinux'))
     expect(await page.$text('div')).toContain('foo-bar-baz')
     expect(await page.$text('div')).toContain('fizz-buzz')