Skip to content
This repository was archived by the owner on Feb 11, 2023. It is now read-only.

Commit 1f41b15

Browse files
ntkmentkme
committed
Avoid duplicated rerending
- vuejs/vue#7481
1 parent fc4750e commit 1f41b15

9 files changed

+740
-708
lines changed

‎dist/vue-relay.common.js

+191-181
Large diffs are not rendered by default.

‎dist/vue-relay.esm.js

+191-181
Large diffs are not rendered by default.

‎dist/vue-relay.js

+191-181
Large diffs are not rendered by default.

‎dist/vue-relay.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/VueRelayFragmentContainer.js

+19-19
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,24 @@ const createContainerWithFragments = function (fragments) {
3232
})
3333
}
3434
},
35-
beforeUpdate () {
35+
methods: {
36+
setState (state) {
37+
this.state = Object.freeze({
38+
...this.state,
39+
...state
40+
})
41+
},
42+
_handleFragmentDataUpdate () {
43+
this.setState({
44+
data: this.state.resolver.resolve(),
45+
relayProp: {
46+
isLoading: this.state.resolver.isLoading(),
47+
environment: this.state.relayProp.environment
48+
}
49+
})
50+
}
51+
},
52+
watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
3653
const {
3754
createFragmentSpecResolver,
3855
getDataIDsFromObject
@@ -85,26 +102,9 @@ const createContainerWithFragments = function (fragments) {
85102
})
86103
}
87104
}
88-
},
105+
} })) },
89106
beforeDestroy () {
90107
this.state.resolver.dispose()
91-
},
92-
methods: {
93-
setState (state) {
94-
this.state = Object.freeze({
95-
...this.state,
96-
...state
97-
})
98-
},
99-
_handleFragmentDataUpdate () {
100-
this.setState({
101-
data: this.state.resolver.resolve(),
102-
relayProp: {
103-
isLoading: this.state.resolver.isLoading(),
104-
environment: this.state.relayProp.environment
105-
}
106-
})
107-
}
108108
}
109109
}
110110
}

‎src/VueRelayPaginationContainer.js

+51-51
Original file line numberDiff line numberDiff line change
@@ -147,57 +147,6 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
147147
})
148148
}
149149
},
150-
beforeUpdate () {
151-
const {
152-
createFragmentSpecResolver,
153-
getDataIDsFromObject
154-
} = relay.environment.unstable_internal
155-
156-
const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
157-
const nextIDs = getDataIDsFromObject(fragments, this.$props)
158-
159-
// If the environment has changed or props point to new records then
160-
// previously fetched data and any pending fetches no longer apply:
161-
// - Existing references are on the old environment.
162-
// - Existing references are based on old variables.
163-
// - Pending fetches are for the previous records.
164-
if (
165-
this.state.relayEnvironment !== relay.environment ||
166-
this.state.relayVariables !== relay.variables ||
167-
!areEqual(prevIDs, nextIDs)
168-
) {
169-
this._release()
170-
171-
this.context.relay.environment = relay.environment
172-
this.context.relay.variables = relay.variables
173-
174-
const resolver = createFragmentSpecResolver(
175-
relay,
176-
this.$options.name,
177-
fragments,
178-
this.$props,
179-
this._handleFragmentDataUpdate
180-
)
181-
182-
this.setState({
183-
prevProps: this.$props,
184-
relayEnvironment: relay.environment,
185-
relayVariables: relay.variables,
186-
relayProp: this._buildRelayProp(relay),
187-
localVariables: null,
188-
resolver
189-
})
190-
} else if (!this.state.localVariables) {
191-
this.state.resolver.setProps(this.$props)
192-
}
193-
const data = this.state.resolver.resolve()
194-
if (data !== this.state.data) {
195-
this.setState({ data })
196-
}
197-
},
198-
beforeDestroy () {
199-
this._release()
200-
},
201150
methods: {
202151
setState (state) {
203152
this.state = Object.freeze({
@@ -492,6 +441,57 @@ const createContainerWithFragments = function (fragments, connectionConfig) {
492441
this.state.queryFetcher.dispose()
493442
}
494443
}
444+
},
445+
watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
446+
const {
447+
createFragmentSpecResolver,
448+
getDataIDsFromObject
449+
} = relay.environment.unstable_internal
450+
451+
const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
452+
const nextIDs = getDataIDsFromObject(fragments, this.$props)
453+
454+
// If the environment has changed or props point to new records then
455+
// previously fetched data and any pending fetches no longer apply:
456+
// - Existing references are on the old environment.
457+
// - Existing references are based on old variables.
458+
// - Pending fetches are for the previous records.
459+
if (
460+
this.state.relayEnvironment !== relay.environment ||
461+
this.state.relayVariables !== relay.variables ||
462+
!areEqual(prevIDs, nextIDs)
463+
) {
464+
this._release()
465+
466+
this.context.relay.environment = relay.environment
467+
this.context.relay.variables = relay.variables
468+
469+
const resolver = createFragmentSpecResolver(
470+
relay,
471+
this.$options.name,
472+
fragments,
473+
this.$props,
474+
this._handleFragmentDataUpdate
475+
)
476+
477+
this.setState({
478+
prevProps: this.$props,
479+
relayEnvironment: relay.environment,
480+
relayVariables: relay.variables,
481+
relayProp: this._buildRelayProp(relay),
482+
localVariables: null,
483+
resolver
484+
})
485+
} else if (!this.state.localVariables) {
486+
this.state.resolver.setProps(this.$props)
487+
}
488+
const data = this.state.resolver.resolve()
489+
if (data !== this.state.data) {
490+
this.setState({ data })
491+
}
492+
} })) },
493+
beforeDestroy () {
494+
this._release()
495495
}
496496
}
497497
}

‎src/VueRelayQueryRenderer.js

+34-32
Original file line numberDiff line numberDiff line change
@@ -106,20 +106,22 @@ const fetchQueryAndComputeStateFromProps = function (props, queryFetcher, retryC
106106
}
107107
}
108108

109+
const props = {
110+
cacheConfig: {},
111+
dataFrom: {},
112+
environment: {
113+
required: true
114+
},
115+
query: {},
116+
variables: {
117+
type: Object,
118+
default: () => ({})
119+
}
120+
}
121+
109122
export default {
110123
name: 'relay-query-renderer',
111-
props: {
112-
cacheConfig: {},
113-
dataFrom: {},
114-
environment: {
115-
required: true
116-
},
117-
query: {},
118-
variables: {
119-
type: Object,
120-
default: () => ({})
121-
}
122-
},
124+
props,
123125
data () {
124126
const handleDataChange = ({ error, snapshot }) => {
125127
this.setState({ renderProps: getRenderProps(error, snapshot, queryFetcher, retryCallbacks) })
@@ -154,16 +156,24 @@ export default {
154156
}
155157
}),
156158
state: Object.freeze({
157-
prevPropsEnvironment: this.$props.environment,
158-
prevPropsVariables: this.$props.variables,
159-
prevQuery: this.$props.query,
159+
prevPropsEnvironment: this.environment,
160+
prevPropsVariables: this.variables,
161+
prevQuery: this.query,
160162
queryFetcher,
161163
retryCallbacks,
162164
...state
163165
})
164166
}
165167
},
166-
beforeUpdate () {
168+
methods: {
169+
setState (state) {
170+
this.state = Object.freeze({
171+
...this.state,
172+
...state
173+
})
174+
}
175+
},
176+
watch: { ...Object.keys(props).map((key) => ({ [key]: function () {
167177
if (
168178
this.state.prevQuery !== this.query ||
169179
this.state.prevPropsEnvironment !== this.environment ||
@@ -188,9 +198,12 @@ export default {
188198
...state
189199
})
190200
}
191-
},
192-
beforeDestroy () {
193-
this.state.queryFetcher.dispose()
201+
} })) },
202+
render (h) {
203+
if (process.env.NODE_ENV !== 'production') {
204+
require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
205+
}
206+
return h(this.component)
194207
},
195208
created () {
196209
this.component = {
@@ -207,18 +220,7 @@ export default {
207220
}
208221
}
209222
},
210-
render (h) {
211-
if (process.env.NODE_ENV !== 'production') {
212-
require('relay-runtime/lib/deepFreeze')(this.state.renderProps)
213-
}
214-
return h(this.component)
215-
},
216-
methods: {
217-
setState (state) {
218-
this.state = Object.freeze({
219-
...this.state,
220-
...state
221-
})
222-
}
223+
beforeDestroy () {
224+
this.state.queryFetcher.dispose()
223225
}
224226
}

‎src/VueRelayRefetchContainer.js

+51-51
Original file line numberDiff line numberDiff line change
@@ -43,57 +43,6 @@ const createContainerWithFragments = function (fragments, taggedNode) {
4343
})
4444
}
4545
},
46-
beforeUpdate () {
47-
const {
48-
createFragmentSpecResolver,
49-
getDataIDsFromObject
50-
} = relay.environment.unstable_internal
51-
52-
const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
53-
const nextIDs = getDataIDsFromObject(fragments, this.$props)
54-
55-
// If the environment has changed or props point to new records then
56-
// previously fetched data and any pending fetches no longer apply:
57-
// - Existing references are on the old environment.
58-
// - Existing references are based on old variables.
59-
// - Pending fetches are for the previous records.
60-
if (
61-
this.state.relayEnvironment !== relay.environment ||
62-
this.state.relayVariables !== relay.variables ||
63-
!areEqual(prevIDs, nextIDs)
64-
) {
65-
this._release()
66-
67-
this.context.relay.environment = relay.environment
68-
this.context.relay.variables = relay.variables
69-
70-
const resolver = createFragmentSpecResolver(
71-
relay,
72-
this.$options.name,
73-
fragments,
74-
this.$props,
75-
this._handleFragmentDataUpdate
76-
)
77-
78-
this.setState({
79-
prevProps: this.$props,
80-
relayEnvironment: relay.environment,
81-
relayVariables: relay.variables,
82-
relayProp: this._buildRelayProp(relay),
83-
localVariables: null,
84-
resolver
85-
})
86-
} else if (!this.state.localVariables) {
87-
this.state.resolver.setProps(this.$props)
88-
}
89-
const data = this.state.resolver.resolve()
90-
if (data !== this.state.data) {
91-
this.setState({ data })
92-
}
93-
},
94-
beforeDestroy () {
95-
this._release()
96-
},
9746
methods: {
9847
setState (state) {
9948
this.state = Object.freeze({
@@ -227,6 +176,57 @@ const createContainerWithFragments = function (fragments, taggedNode) {
227176
this.state.queryFetcher.dispose()
228177
}
229178
}
179+
},
180+
watch: { ...Object.keys(fragments).map((key) => ({ [key]: function () {
181+
const {
182+
createFragmentSpecResolver,
183+
getDataIDsFromObject
184+
} = relay.environment.unstable_internal
185+
186+
const prevIDs = getDataIDsFromObject(fragments, this.state.prevProps)
187+
const nextIDs = getDataIDsFromObject(fragments, this.$props)
188+
189+
// If the environment has changed or props point to new records then
190+
// previously fetched data and any pending fetches no longer apply:
191+
// - Existing references are on the old environment.
192+
// - Existing references are based on old variables.
193+
// - Pending fetches are for the previous records.
194+
if (
195+
this.state.relayEnvironment !== relay.environment ||
196+
this.state.relayVariables !== relay.variables ||
197+
!areEqual(prevIDs, nextIDs)
198+
) {
199+
this._release()
200+
201+
this.context.relay.environment = relay.environment
202+
this.context.relay.variables = relay.variables
203+
204+
const resolver = createFragmentSpecResolver(
205+
relay,
206+
this.$options.name,
207+
fragments,
208+
this.$props,
209+
this._handleFragmentDataUpdate
210+
)
211+
212+
this.setState({
213+
prevProps: this.$props,
214+
relayEnvironment: relay.environment,
215+
relayVariables: relay.variables,
216+
relayProp: this._buildRelayProp(relay),
217+
localVariables: null,
218+
resolver
219+
})
220+
} else if (!this.state.localVariables) {
221+
this.state.resolver.setProps(this.$props)
222+
}
223+
const data = this.state.resolver.resolve()
224+
if (data !== this.state.data) {
225+
this.setState({ data })
226+
}
227+
} })) },
228+
beforeDestroy () {
229+
this._release()
230230
}
231231
}
232232
}

0 commit comments

Comments
 (0)