Avoid duplicated re-rendering

- vuejs/vue#7481
vue-relay · Mar 3, 2018 · be7cb8f · be7cb8f
1 parent fc4750e
commit be7cb8f
Show file tree

Hide file tree

Showing 9 changed files with 740 additions and 708 deletions.
diff --git a/dist/vue-relay.common.js b/dist/vue-relay.common.js
diff --git a/dist/vue-relay.esm.js b/dist/vue-relay.esm.js
diff --git a/dist/vue-relay.js b/dist/vue-relay.js
diff --git a/dist/vue-relay.min.js b/dist/vue-relay.min.js
diff --git a/src/VueRelayFragmentContainer.js b/src/VueRelayFragmentContainer.js
@@ -32,7 +32,24 @@ const createContainerWithFragments = function (fragments) {
         })
       }
     },
-    beforeUpdate () {
+    methods: {
+      setState (state) {
+        this.state = Object.freeze({
+          ...this.state,
+          ...state
+        })
+      },
+      _handleFragmentDataUpdate () {
+        this.setState({
+          data: this.state.resolver.resolve(),
+          relayProp: {
+            isLoading: this.state.resolver.isLoading(),
+            environment: this.state.relayProp.environment
+          }
+        })
+      }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
       const {
         createFragmentSpecResolver,
         getDataIDsFromObject
@@ -85,26 +102,9 @@ const createContainerWithFragments = function (fragments) {
           })
         }
       }
-    },
+    } })) },
     beforeDestroy () {
       this.state.resolver.dispose()
-    },
-    methods: {
-      setState (state) {
-        this.state = Object.freeze({
-          ...this.state,
-          ...state
-        })
-      },
-      _handleFragmentDataUpdate () {
-        this.setState({
-          data: this.state.resolver.resolve(),
-          relayProp: {
-            isLoading: this.state.resolver.isLoading(),
-            environment: this.state.relayProp.environment
-          }
-        })
-      }
     }
   }
 }

diff --git a/src/VueRelayPaginationContainer.js b/src/VueRelayPaginationContainer.js
@@ -147,57 +147,6 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
         })
       }
     },
-    beforeUpdate () {
-      const {
-        createFragmentSpecResolver,
-        getDataIDsFromObject
-      } = relay.environment.unstable_internal
-
-      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
-      const nextIDs = getDataIDsFromObject(fragments, this.$props)
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (
-        this.state.relayEnvironment !== relay.environment ||
-        this.state.relayVariables !== relay.variables ||
-        !areEqual(prevIDs, nextIDs)
-      ) {
-        this._release()
-
-        this.context.relay.environment = relay.environment
-        this.context.relay.variables = relay.variables
-
-        const resolver = createFragmentSpecResolver(
-          relay,
-          this.$options.name,
-          fragments,
-          this.$props,
-          this._handleFragmentDataUpdate
-        )
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver
-        })
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props)
-      }
-      const data = this.state.resolver.resolve()
-      if (data !== this.state.data) {
-        this.setState({ data })
-      }
-    },
-    beforeDestroy () {
-      this._release()
-    },
     methods: {
       setState (state) {
         this.state = Object.freeze({
@@ -492,6 +441,57 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
           this.state.queryFetcher.dispose()
         }
       }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
+      const {
+        createFragmentSpecResolver,
+        getDataIDsFromObject
+      } = relay.environment.unstable_internal
+
+      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
+      const nextIDs = getDataIDsFromObject(fragments, this.$props)
+
+      // If the environment has changed or props point to new records then
+      // previously fetched data and any pending fetches no longer apply:
+      // - Existing references are on the old environment.
+      // - Existing references are based on old variables.
+      // - Pending fetches are for the previous records.
+      if (
+        this.state.relayEnvironment !== relay.environment ||
+        this.state.relayVariables !== relay.variables ||
+        !areEqual(prevIDs, nextIDs)
+      ) {
+        this._release()
+
+        this.context.relay.environment = relay.environment
+        this.context.relay.variables = relay.variables
+
+        const resolver = createFragmentSpecResolver(
+          relay,
+          this.$options.name,
+          fragments,
+          this.$props,
+          this._handleFragmentDataUpdate
+        )
+
+        this.setState({
+          prevProps: this.$props,
+          relayEnvironment: relay.environment,
+          relayVariables: relay.variables,
+          relayProp: this._buildRelayProp(relay),
+          localVariables: null,
+          resolver
+        })
+      } else if (!this.state.localVariables) {
+        this.state.resolver.setProps(this.$props)
+      }
+      const data = this.state.resolver.resolve()
+      if (data !== this.state.data) {
+        this.setState({ data })
+      }
+    } })) },
+    beforeDestroy () {
+      this._release()
     }
   }
 }

diff --git a/src/VueRelayQueryRenderer.js b/src/VueRelayQueryRenderer.js
@@ -106,20 +106,22 @@ const fetchQueryAndComputeStateFromProps = function (props, queryFetcher, retryC
   }
 }
 
+const props = {
+  cacheConfig: {},
+  dataFrom: {},
+  environment: {
+    required: true
+  },
+  query: {},
+  variables: {
+    type: Object,
+    default: () => ({})
+  }
+}
+
 export default {
   name: 'relay-query-renderer',
-  props: {
-    cacheConfig: {},
-    dataFrom: {},
-    environment: {
-      required: true
-    },
-    query: {},
-    variables: {
-      type: Object,
-      default: () => ({})
-    }
-  },
+  props,
   data () {
     const handleDataChange = ({ error, snapshot }) => {
       this.setState({ renderProps: getRenderProps(error, snapshot, queryFetcher, retryCallbacks) })
@@ -154,16 +156,24 @@ export default {
         }
       }),
       state: Object.freeze({
-        prevPropsEnvironment: this.$props.environment,
-        prevPropsVariables: this.$props.variables,
-        prevQuery: this.$props.query,
+        prevPropsEnvironment: this.environment,
+        prevPropsVariables: this.variables,
+        prevQuery: this.query,
         queryFetcher,
         retryCallbacks,
         ...state
       })
     }
   },
-  beforeUpdate () {
+  methods: {
+    setState (state) {
+      this.state = Object.freeze({
+        ...this.state,
+        ...state
+      })
+    }
+  },
+  watch: { ...Object.keys(props).map((key) => ({ [key]: function () {
     if (
       this.state.prevQuery !== this.query ||
       this.state.prevPropsEnvironment !== this.environment ||
@@ -188,9 +198,12 @@ export default {
         ...state
       })
     }
-  },
-  beforeDestroy () {
-    this.state.queryFetcher.dispose()
+  } })) },
+  render (h) {
+    if (process.env.NODE_ENV !== 'production') {
+      require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
+    }
+    return h(this.component)
   },
   created () {
     this.component = {
@@ -207,18 +220,7 @@ export default {
       }
     }
   },
-  render (h) {
-    if (process.env.NODE_ENV !== 'production') {
-      require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
-    }
-    return h(this.component)
-  },
-  methods: {
-    setState (state) {
-      this.state = Object.freeze({
-        ...this.state,
-        ...state
-      })
-    }
+  beforeDestroy () {
+    this.state.queryFetcher.dispose()
   }
 }
diff --git a/src/VueRelayRefetchContainer.js b/src/VueRelayRefetchContainer.js
@@ -43,57 +43,6 @@ const createContainerWithFragments = function (fragments, taggedNode) {
         })
       }
     },
-    beforeUpdate () {
-      const {
-        createFragmentSpecResolver,
-        getDataIDsFromObject
-      } = relay.environment.unstable_internal
-
-      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
-      const nextIDs = getDataIDsFromObject(fragments, this.$props)
-
-      // If the environment has changed or props point to new records then
-      // previously fetched data and any pending fetches no longer apply:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
-      if (
-        this.state.relayEnvironment !== relay.environment ||
-        this.state.relayVariables !== relay.variables ||
-        !areEqual(prevIDs, nextIDs)
-      ) {
-        this._release()
-
-        this.context.relay.environment = relay.environment
-        this.context.relay.variables = relay.variables
-
-        const resolver = createFragmentSpecResolver(
-          relay,
-          this.$options.name,
-          fragments,
-          this.$props,
-          this._handleFragmentDataUpdate
-        )
-
-        this.setState({
-          prevProps: this.$props,
-          relayEnvironment: relay.environment,
-          relayVariables: relay.variables,
-          relayProp: this._buildRelayProp(relay),
-          localVariables: null,
-          resolver
-        })
-      } else if (!this.state.localVariables) {
-        this.state.resolver.setProps(this.$props)
-      }
-      const data = this.state.resolver.resolve()
-      if (data !== this.state.data) {
-        this.setState({ data })
-      }
-    },
-    beforeDestroy () {
-      this._release()
-    },
     methods: {
       setState (state) {
         this.state = Object.freeze({
@@ -227,6 +176,57 @@ const createContainerWithFragments = function (fragments, taggedNode) {
           this.state.queryFetcher.dispose()
         }
       }
+    },
+    watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
+      const {
+        createFragmentSpecResolver,
+        getDataIDsFromObject
+      } = relay.environment.unstable_internal
+
+      const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
+      const nextIDs = getDataIDsFromObject(fragments, this.$props)
+
+      // If the environment has changed or props point to new records then
+      // previously fetched data and any pending fetches no longer apply:
+      // - Existing references are on the old environment.
+      // - Existing references are based on old variables.
+      // - Pending fetches are for the previous records.
+      if (
+        this.state.relayEnvironment !== relay.environment ||
+        this.state.relayVariables !== relay.variables ||
+        !areEqual(prevIDs, nextIDs)
+      ) {
+        this._release()
+
+        this.context.relay.environment = relay.environment
+        this.context.relay.variables = relay.variables
+
+        const resolver = createFragmentSpecResolver(
+          relay,
+          this.$options.name,
+          fragments,
+          this.$props,
+          this._handleFragmentDataUpdate
+        )
+
+        this.setState({
+          prevProps: this.$props,
+          relayEnvironment: relay.environment,
+          relayVariables: relay.variables,
+          relayProp: this._buildRelayProp(relay),
+          localVariables: null,
+          resolver
+        })
+      } else if (!this.state.localVariables) {
+        this.state.resolver.setProps(this.$props)
+      }
+      const data = this.state.resolver.resolve()
+      if (data !== this.state.data) {
+        this.setState({ data })
+      }
+    } })) },
+    beforeDestroy () {
+      this._release()
     }
   }
 }