From 7278b10112e6bece7692e90fe8dd16c873bee3b7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 16 Nov 2020 08:43:20 +0000
Subject: [PATCH] fix(vue-app): warn if promises and functions are in fetch
 state (#8348)

---
 .../vue-app/template/mixins/fetch.server.js    |  4 ++--
 packages/vue-app/template/utils.js             | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/vue-app/template/mixins/fetch.server.js b/packages/vue-app/template/mixins/fetch.server.js
index 01bfff80e3..9257031520 100644
--- a/packages/vue-app/template/mixins/fetch.server.js
+++ b/packages/vue-app/template/mixins/fetch.server.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { hasFetch, normalizeError, addLifecycleHook } from '../utils'
+import { hasFetch, normalizeError, addLifecycleHook, purifyData } from '../utils'
 
 async function serverPrefetch() {
   if (!this._fetchOnServer) {
@@ -26,7 +26,7 @@ async function serverPrefetch() {
   attrs['data-fetch-key'] = this._fetchKey
 
   // Add to ssrContext for window.__NUXT__.fetch
-  this.$ssrContext.nuxt.fetch.push(this.$fetchState.error ? { _error: this.$fetchState.error } : this._data)
+  this.$ssrContext.nuxt.fetch.push(this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data))
 }
 
 export default {
diff --git a/packages/vue-app/template/utils.js b/packages/vue-app/template/utils.js
index bfb644afb1..e4c45059b3 100644
--- a/packages/vue-app/template/utils.js
+++ b/packages/vue-app/template/utils.js
@@ -25,6 +25,24 @@ export function interopDefault (promise) {
 export function hasFetch(vm) {
   return vm.$options && typeof vm.$options.fetch === 'function' && !vm.$options.fetch.length
 }
+export function purifyData(data) {
+  if (process.env.NODE_ENV === 'production') {
+    return data
+  }
+
+  return Object.entries(data).filter(
+    ([key, value]) => {
+      const valid = !(value instanceof Function) && !(value instanceof Promise)
+      if (!valid) {
+        console.warn(`${key} is not able to be stringified. This will break in a production environment.`)
+      }
+      return valid
+    }
+    ).reduce((obj, [key, value]) => {
+      obj[key] = value
+      return obj
+    }, {})
+}
 export function getChildrenComponentInstancesUsingFetch(vm, instances = []) {
   const children = vm.$children || []
   for (const child of children) {