Skip to content

Commit 966ca31

Browse files
jaydensericjaydenseric
committed
Change useGraphQL hook loading releated option defaults.
1 parent 04ba464 commit 966ca31

File tree

4 files changed

+53
-38
lines changed

4 files changed

+53
-38
lines changed

‎changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
### Major
66

77
- Updated Node.js support from v8.5+ to v8.10+, to match what the [`eslint`](https://npm.im/eslint) dev dependency now supports. This is unlikely to be a breaking change for the published package.
8+
- The `useGraphQL` React hook `loadOnMount`, `loadOnReload`, and `loadOnReset` options now default to `false` instead of `true`. The loading related options are now all opt-in, which is easier to remember and simpler to configure for situations that previously required manual reversal of certain option defaults. It's also safer when working with mutations you don't want to accidentally load.
89

910
### Patch
1011

‎readme.md‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,19 @@ const PokemonImage = ({ name }) => {
6767
// GraphQL server in the fetch request body.
6868
operation: {
6969
query: `{ pokemon(name: "${name}") { image } }`
70-
}
70+
},
71+
72+
// Load the query whenever the component mounts. This is desirable for
73+
// queries to display content, but not for on demand situations like
74+
// pagination view more buttons or forms that submit mutations.
75+
loadOnMount: true,
76+
77+
// Reload the query whenever a global cache reload is signaled.
78+
loadOnReload: true,
79+
80+
// Reload the query whenever the global cache is reset. Resets immediately
81+
// delete the cache and are mostly only used when logging out the user.
82+
loadOnReset: true
7183
})
7284

7385
return cacheValue.data ? (
@@ -383,9 +395,9 @@ A [React hook](https://reactjs.org/docs/hooks-intro) to manage a GraphQL operati
383395
| :-- | :-- | :-- |
384396
| `options` | object | Options. |
385397
| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default [`fetch` options](#type-graphqlfetchoptions) for the GraphQL operation. |
386-
| `options.loadOnMount` | boolean? = `true` | Should the operation load when the component mounts. |
387-
| `options.loadOnReload` | boolean? = `true` | Should the operation load when the [`GraphQL`](#class-graphql) `reload` event fires and there is a [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) to reload, but only if the operation was not the one that caused the reload. |
388-
| `options.loadOnReset` | boolean? = `true` | Should the operation load when the [`GraphQL`](#class-graphql) `reset` event fires and the [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) is deleted, but only if the operation was not the one that caused the reset. |
398+
| `options.loadOnMount` | boolean? = `false` | Should the operation load when the component mounts. |
399+
| `options.loadOnReload` | boolean? = `false` | Should the operation load when the [`GraphQL`](#class-graphql) `reload` event fires and there is a [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) to reload, but only if the operation was not the one that caused the reload. |
400+
| `options.loadOnReset` | boolean? = `false` | Should the operation load when the [`GraphQL`](#class-graphql) `reset` event fires and the [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) is deleted, but only if the operation was not the one that caused the reset. |
389401
| `options.reloadOnLoad` | boolean? = `false` | Should a [GraphQL reload](#graphql-instance-method-reload) happen after the operation loads, excluding the loaded operation cache. |
390402
| `options.resetOnLoad` | boolean? = `false` | Should a [GraphQL reset](#graphql-instance-method-reset) happen after the operation loads, excluding the loaded operation cache. |
391403
| `options.operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. |
@@ -410,7 +422,10 @@ _A component that displays a Pokémon image._
410422
> },
411423
> operation: {
412424
> query: `{ pokemon(name: "${name}") { image } }`
413-
> }
425+
> },
426+
> loadOnMount: true,
427+
> loadOnReload: true,
428+
> loadOnReset: true
414429
> })
415430
>
416431
> return cacheValue.data ? (
@@ -425,8 +440,6 @@ _A component that displays a Pokémon image._
425440
426441
_Options guide for common situations._
427442
428-
> The defaults are suitable for typical query use, as apps tend to have more queries than mutations.
429-
>
430443
> | Situation | `loadOnMount` | `loadOnReload` | `loadOnReset` | `reloadOnLoad` | `resetOnLoad` |
431444
> | :-- | :-: | :-: | :-: | :-: | :-: |
432445
> | Profile query | ✔️ | ✔️ | ✔️ | | |

‎src/test/useGraphQL.mjs‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ t.test('useGraphQL()', async t => {
4848
}
4949

5050
await t.test('Without initial cache', async t => {
51-
await t.test('`loadOnMount` true (default)', async t => {
51+
await t.test('`loadOnMount` true', async t => {
5252
const graphql = new GraphQL()
5353
const testRenderer = ReactTestRenderer.create(null)
5454

@@ -62,7 +62,7 @@ t.test('useGraphQL()', async t => {
6262
ReactTestRenderer.act(() => {
6363
testRenderer.update(
6464
<GraphQLProvider graphql={graphql}>
65-
<Component {...operation1Options} />
65+
<Component {...operation1Options} loadOnMount={true} />
6666
</GraphQLProvider>
6767
)
6868
})
@@ -92,7 +92,7 @@ t.test('useGraphQL()', async t => {
9292
ReactTestRenderer.act(() => {
9393
testRenderer.update(
9494
<GraphQLProvider graphql={graphql}>
95-
<Component {...operation2Options} />
95+
<Component {...operation2Options} loadOnMount={true} />
9696
</GraphQLProvider>
9797
)
9898
})
@@ -113,7 +113,7 @@ t.test('useGraphQL()', async t => {
113113
})
114114
})
115115

116-
await t.test('`loadOnMount` false', async t => {
116+
await t.test('`loadOnMount` false (default)', async t => {
117117
const graphql = new GraphQL()
118118
const testRenderer = ReactTestRenderer.create(null)
119119

@@ -127,7 +127,7 @@ t.test('useGraphQL()', async t => {
127127
ReactTestRenderer.act(() => {
128128
testRenderer.update(
129129
<GraphQLProvider graphql={graphql}>
130-
<Component {...operation1Options} loadOnMount={false} />
130+
<Component {...operation1Options} />
131131
</GraphQLProvider>
132132
)
133133
})
@@ -147,7 +147,7 @@ t.test('useGraphQL()', async t => {
147147
ReactTestRenderer.act(() => {
148148
testRenderer.update(
149149
<GraphQLProvider graphql={graphql}>
150-
<Component {...operation2Options} loadOnMount={false} />
150+
<Component {...operation2Options} />
151151
</GraphQLProvider>
152152
)
153153
})
@@ -166,7 +166,7 @@ t.test('useGraphQL()', async t => {
166166
})
167167

168168
await t.test('With initial cache', async t => {
169-
await t.test('`loadOnMount` true (default)', async t => {
169+
await t.test('`loadOnMount` true', async t => {
170170
const graphql = new GraphQL({ cache })
171171
const testRenderer = ReactTestRenderer.create(null)
172172

@@ -180,7 +180,7 @@ t.test('useGraphQL()', async t => {
180180
ReactTestRenderer.act(() => {
181181
testRenderer.update(
182182
<GraphQLProvider graphql={graphql}>
183-
<Component {...operation1Options} />
183+
<Component {...operation1Options} loadOnMount={true} />
184184
</GraphQLProvider>
185185
)
186186
})
@@ -210,7 +210,7 @@ t.test('useGraphQL()', async t => {
210210
ReactTestRenderer.act(() => {
211211
testRenderer.update(
212212
<GraphQLProvider graphql={graphql}>
213-
<Component {...operation2Options} />
213+
<Component {...operation2Options} loadOnMount={true} />
214214
</GraphQLProvider>
215215
)
216216
})
@@ -243,7 +243,7 @@ t.test('useGraphQL()', async t => {
243243
ReactTestRenderer.act(() => {
244244
testRenderer.update(
245245
<GraphQLProvider graphql={graphql}>
246-
<Component {...operation1Options} />
246+
<Component {...operation1Options} loadOnMount={true} />
247247
</GraphQLProvider>
248248
)
249249
})
@@ -268,7 +268,7 @@ t.test('useGraphQL()', async t => {
268268
})
269269
})
270270

271-
await t.test('`loadOnMount` false', async t => {
271+
await t.test('`loadOnMount` false (default)', async t => {
272272
const graphql = new GraphQL({ cache })
273273
const testRenderer = ReactTestRenderer.create(null)
274274

@@ -282,7 +282,7 @@ t.test('useGraphQL()', async t => {
282282
ReactTestRenderer.act(() => {
283283
testRenderer.update(
284284
<GraphQLProvider graphql={graphql}>
285-
<Component {...operation1Options} loadOnMount={false} />
285+
<Component {...operation1Options} />
286286
</GraphQLProvider>
287287
)
288288
})
@@ -306,7 +306,7 @@ t.test('useGraphQL()', async t => {
306306
ReactTestRenderer.act(() => {
307307
testRenderer.update(
308308
<GraphQLProvider graphql={graphql}>
309-
<Component {...operation2Options} loadOnMount={false} />
309+
<Component {...operation2Options} />
310310
</GraphQLProvider>
311311
)
312312
})
@@ -329,7 +329,7 @@ t.test('useGraphQL()', async t => {
329329
})
330330

331331
await t.test('With initial cache (partial)', async t => {
332-
await t.test('`loadOnMount` true (default)', async t => {
332+
await t.test('`loadOnMount` true', async t => {
333333
const graphql = new GraphQL({
334334
cache: { [operation1CacheKey]: operation1CacheValue }
335335
})
@@ -345,7 +345,7 @@ t.test('useGraphQL()', async t => {
345345
ReactTestRenderer.act(() => {
346346
testRenderer.update(
347347
<GraphQLProvider graphql={graphql}>
348-
<Component {...operation1Options} />
348+
<Component {...operation1Options} loadOnMount={true} />
349349
</GraphQLProvider>
350350
)
351351
})
@@ -375,7 +375,7 @@ t.test('useGraphQL()', async t => {
375375
ReactTestRenderer.act(() => {
376376
testRenderer.update(
377377
<GraphQLProvider graphql={graphql}>
378-
<Component {...operation2Options} />
378+
<Component {...operation2Options} loadOnMount={true} />
379379
</GraphQLProvider>
380380
)
381381
})
@@ -396,7 +396,7 @@ t.test('useGraphQL()', async t => {
396396
})
397397
})
398398

399-
await t.test('`loadOnMount` false', async t => {
399+
await t.test('`loadOnMount` false (default)', async t => {
400400
const graphql = new GraphQL({
401401
cache: { [operation1CacheKey]: operation1CacheValue }
402402
})
@@ -412,7 +412,7 @@ t.test('useGraphQL()', async t => {
412412
ReactTestRenderer.act(() => {
413413
testRenderer.update(
414414
<GraphQLProvider graphql={graphql}>
415-
<Component {...operation1Options} loadOnMount={false} />
415+
<Component {...operation1Options} />
416416
</GraphQLProvider>
417417
)
418418
})
@@ -436,7 +436,7 @@ t.test('useGraphQL()', async t => {
436436
ReactTestRenderer.act(() => {
437437
testRenderer.update(
438438
<GraphQLProvider graphql={graphql}>
439-
<Component {...operation2Options} loadOnMount={false} />
439+
<Component {...operation2Options} />
440440
</GraphQLProvider>
441441
)
442442
})
@@ -541,7 +541,7 @@ t.test('useGraphQL()', async t => {
541541
ReactTestRenderer.act(() => {
542542
testRenderer.update(
543543
<GraphQLContext.Provider value={graphql}>
544-
<Component {...operation1Options} />
544+
<Component {...operation1Options} loadOnMount={true} />
545545
</GraphQLContext.Provider>
546546
)
547547
})

‎src/universal/useGraphQL.mjs‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import { hashObject } from './hashObject'
1212
* @name useGraphQL
1313
* @param {object} options Options.
1414
* @param {GraphQLFetchOptionsOverride} [options.fetchOptionsOverride] Overrides default [`fetch` options]{@link GraphQLFetchOptions} for the GraphQL operation.
15-
* @param {boolean} [options.loadOnMount=true] Should the operation load when the component mounts.
16-
* @param {boolean} [options.loadOnReload=true] Should the operation load when the [`GraphQL`]{@link GraphQL} `reload` event fires and there is a [GraphQL cache]{@link GraphQL#cache} [value]{@link GraphQLCacheValue} to reload, but only if the operation was not the one that caused the reload.
17-
* @param {boolean} [options.loadOnReset=true] Should the operation load when the [`GraphQL`]{@link GraphQL} `reset` event fires and the [GraphQL cache]{@link GraphQL#cache} [value]{@link GraphQLCacheValue} is deleted, but only if the operation was not the one that caused the reset.
15+
* @param {boolean} [options.loadOnMount=false] Should the operation load when the component mounts.
16+
* @param {boolean} [options.loadOnReload=false] Should the operation load when the [`GraphQL`]{@link GraphQL} `reload` event fires and there is a [GraphQL cache]{@link GraphQL#cache} [value]{@link GraphQLCacheValue} to reload, but only if the operation was not the one that caused the reload.
17+
* @param {boolean} [options.loadOnReset=false] Should the operation load when the [`GraphQL`]{@link GraphQL} `reset` event fires and the [GraphQL cache]{@link GraphQL#cache} [value]{@link GraphQLCacheValue} is deleted, but only if the operation was not the one that caused the reset.
1818
* @param {boolean} [options.reloadOnLoad=false] Should a [GraphQL reload]{@link GraphQL#reload} happen after the operation loads, excluding the loaded operation cache.
1919
* @param {boolean} [options.resetOnLoad=false] Should a [GraphQL reset]{@link GraphQL#reset} happen after the operation loads, excluding the loaded operation cache.
2020
* @param {GraphQLOperation} options.operation GraphQL operation.
@@ -31,7 +31,10 @@ import { hashObject } from './hashObject'
3131
* },
3232
* operation: {
3333
* query: `{ pokemon(name: "${name}") { image } }`
34-
* }
34+
* },
35+
* loadOnMount: true,
36+
* loadOnReload: true,
37+
* loadOnReset: true
3538
* })
3639
*
3740
* return cacheValue.data ? (
@@ -44,8 +47,6 @@ import { hashObject } from './hashObject'
4447
*}
4548
* ```
4649
* @example <caption>Options guide for common situations.</caption>
47-
* The defaults are suitable for typical query use, as apps tend to have more queries than mutations.
48-
*
4950
* | Situation | `loadOnMount` | `loadOnReload` | `loadOnReset` | `reloadOnLoad` | `resetOnLoad` |
5051
* | :-- | :-: | :-: | :-: | :-: | :-: |
5152
* | Profile query | ✔️ | ✔️ | ✔️ | | |
@@ -57,11 +58,11 @@ import { hashObject } from './hashObject'
5758
*/
5859
export const useGraphQL = ({
5960
fetchOptionsOverride,
60-
loadOnMount = true,
61-
loadOnReload = true,
62-
loadOnReset = true,
63-
reloadOnLoad = false,
64-
resetOnLoad = false,
61+
loadOnMount,
62+
loadOnReload,
63+
loadOnReset,
64+
reloadOnLoad,
65+
resetOnLoad,
6566
operation
6667
}) => {
6768
if (reloadOnLoad && resetOnLoad)

0 commit comments

Comments
 (0)