···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
---

     

       
2
       
+
       
'@urql/exchange-refocus': minor

     

       
3
       
+
       
---

     

       
4
       
+
       


     

       
5
       
+
       
Add `minimumTime` to `refocusExchange` to throttle query reexecution.

     

···

       
22
       
 
       


     

       
23
       
 
       
const client = createClient({

     

       
24
       
 
       
  url: 'http://localhost:3000/graphql',

     

       
25
       
-
       
  exchanges: [refocusExchange(), cacheExchange, fetchExchange],

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
26
       
 
       
});

     

       
27
       
 
       
```

     

···

       
22
       
 
       


     

       
23
       
 
       
const client = createClient({

     

       
24
       
 
       
  url: 'http://localhost:3000/graphql',

     

       
25
       
+
       
  exchanges: [refocusExchange({

     

       
26
       
+
       
    // The minimum time in milliseconds to wait before another refocus can trigger. Default value is 0.

     

       
27
       
+
       
    minimumTime: 2000

     

       
28
       
+
       
  }), cacheExchange, fetchExchange],

     

       
29
       
 
       
});

     

       
30
       
 
       
```

     

···

       
1
       
 
       
import { pipe, tap } from 'wonka';

     

       
2
       
 
       
import type { Exchange, Operation } from '@urql/core';

     

       
3
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
4
       
 
       
/** Exchange factory that reexecutes operations after a user returns to the tab.

     

       
5
       
 
       
 *

     

       
0
       
 
       

     

       
0
       
 
       

     

       
6
       
 
       
 * @returns a new refocus {@link Exchange}.

     

       
7
       
 
       
 *

     

       
8
       
 
       
 * @remarks

     
···

       
14
       
 
       
 * The `cache-and-network` policy will refetch data in the background, but will

     

       
15
       
 
       
 * only refetch queries that are currently active.

     

       
16
       
 
       
 */

     

       
17
       
-
       
export const refocusExchange = (): Exchange => {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
18
       
 
       
  return ({ client, forward }) =>

     

       
19
       
 
       
    ops$ => {

     

       
20
       
 
       
      if (typeof window === 'undefined') {

     
···

       
24
       
 
       
      const watchedOperations = new Map<number, Operation>();

     

       
25
       
 
       
      const observedOperations = new Map<number, number>();

     

       
26
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
27
       
 
       
      window.addEventListener('visibilitychange', () => {

     

       
28
       
-
       
        if (

     

       
29
       
-
       
          typeof document !== 'object' ||

     

       
30
       
-
       
          document.visibilityState === 'visible'

     

       
31
       
-
       
        ) {

     

       
32
       
 
       
          watchedOperations.forEach(op => {

     

       
33
       
 
       
            client.reexecuteOperation(

     

       
34
       
 
       
              client.createRequestOperation('query', op, {

     
···

       
37
       
 
       
              })

     

       
38
       
 
       
            );

     

       
39
       
 
       
          });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
40
       
 
       
        }

     

       
41
       
 
       
      });

     

       
42
       
 
       


     

···

       
1
       
 
       
import { pipe, tap } from 'wonka';

     

       
2
       
 
       
import type { Exchange, Operation } from '@urql/core';

     

       
3
       
 
       


     

       
4
       
+
       
export interface RefocusOptions {

     

       
5
       
+
       
  /** The minimum time in milliseconds to wait before another refocus can trigger.

     

       
6
       
+
       
   * @defaultValue `0`

     

       
7
       
+
       
   */

     

       
8
       
+
       
  minimumTime?: number;

     

       
9
       
+
       
}

     

       
10
       
+
       


     

       
11
       
 
       
/** Exchange factory that reexecutes operations after a user returns to the tab.

     

       
12
       
 
       
 *

     

       
13
       
+
       
 * @param opts - A {@link RefocusOptions} configuration object.

     

       
14
       
+
       
 *

     

       
15
       
 
       
 * @returns a new refocus {@link Exchange}.

     

       
16
       
 
       
 *

     

       
17
       
 
       
 * @remarks

     
···

       
23
       
 
       
 * The `cache-and-network` policy will refetch data in the background, but will

     

       
24
       
 
       
 * only refetch queries that are currently active.

     

       
25
       
 
       
 */

     

       
26
       
+
       
export const refocusExchange = (opts: RefocusOptions = {}): Exchange => {

     

       
27
       
+
       
  const { minimumTime = 0 } = opts;

     

       
28
       
+
       


     

       
29
       
 
       
  return ({ client, forward }) =>

     

       
30
       
 
       
    ops$ => {

     

       
31
       
 
       
      if (typeof window === 'undefined') {

     
···

       
35
       
 
       
      const watchedOperations = new Map<number, Operation>();

     

       
36
       
 
       
      const observedOperations = new Map<number, number>();

     

       
37
       
 
       


     

       
38
       
+
       
      let lastHidden = 0;

     

       
39
       
+
       


     

       
40
       
 
       
      window.addEventListener('visibilitychange', () => {

     

       
41
       
+
       
        const state =

     

       
42
       
+
       
          typeof document !== 'object' ? 'visible' : document.visibilityState;

     

       
43
       
+
       
        if (state === 'visible') {

     

       
44
       
+
       
          if (Date.now() - lastHidden < minimumTime) return;

     

       
45
       
 
       
          watchedOperations.forEach(op => {

     

       
46
       
 
       
            client.reexecuteOperation(

     

       
47
       
 
       
              client.createRequestOperation('query', op, {

     
···

       
50
       
 
       
              })

     

       
51
       
 
       
            );

     

       
52
       
 
       
          });

     

       
53
       
+
       
        } else {

     

       
54
       
+
       
          lastHidden = Date.now();

     

       
55
       
 
       
        }

     

       
56
       
 
       
      });

     

       
57