react-relay 12.0.0 → 13.0.0-rc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (133) hide show
  1. package/ReactRelayContext.js +1 -1
  2. package/ReactRelayContext.js.flow +2 -3
  3. package/ReactRelayFragmentContainer.js.flow +10 -16
  4. package/ReactRelayFragmentMockRenderer.js.flow +1 -1
  5. package/ReactRelayLocalQueryRenderer.js.flow +6 -7
  6. package/ReactRelayPaginationContainer.js.flow +29 -39
  7. package/ReactRelayQueryFetcher.js.flow +9 -10
  8. package/ReactRelayQueryRenderer.js.flow +15 -15
  9. package/ReactRelayRefetchContainer.js.flow +24 -32
  10. package/ReactRelayTestMocker.js.flow +16 -14
  11. package/ReactRelayTypes.js.flow +10 -10
  12. package/RelayContext.js.flow +3 -3
  13. package/__flowtests__/ReactRelayFragmentContainer-flowtest.js.flow +1 -2
  14. package/__flowtests__/ReactRelayPaginationContainer-flowtest.js.flow +1 -2
  15. package/__flowtests__/ReactRelayRefetchContainer-flowtest.js.flow +1 -2
  16. package/__flowtests__/RelayModern-flowtest.js.flow +78 -46
  17. package/__flowtests__/RelayModernFlowtest_badref.graphql.js.flow +5 -4
  18. package/__flowtests__/RelayModernFlowtest_notref.graphql.js.flow +5 -4
  19. package/__flowtests__/RelayModernFlowtest_user.graphql.js.flow +4 -3
  20. package/__flowtests__/RelayModernFlowtest_users.graphql.js.flow +4 -3
  21. package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer.graphql.js.flow +13 -10
  22. package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer2.graphql.js.flow +13 -10
  23. package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtestQuery.graphql.js.flow +13 -8
  24. package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtest_viewer.graphql.js.flow +13 -10
  25. package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtestQuery.graphql.js.flow +13 -8
  26. package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtest_viewer.graphql.js.flow +13 -10
  27. package/__flowtests__/__generated__/RelayModernFlowtest_badref.graphql.js.flow +15 -12
  28. package/__flowtests__/__generated__/RelayModernFlowtest_notref.graphql.js.flow +15 -12
  29. package/__flowtests__/__generated__/RelayModernFlowtest_user.graphql.js.flow +13 -10
  30. package/__flowtests__/__generated__/RelayModernFlowtest_users.graphql.js.flow +13 -10
  31. package/assertFragmentMap.js.flow +2 -2
  32. package/buildReactRelayContainer.js.flow +11 -10
  33. package/getRootVariablesForFragments.js.flow +2 -4
  34. package/hooks.js +1 -1
  35. package/hooks.js.flow +3 -5
  36. package/index.js +1 -1
  37. package/index.js.flow +4 -6
  38. package/jest-react/enqueueTask.js.flow +1 -1
  39. package/jest-react/internalAct.js.flow +1 -2
  40. package/legacy.js +1 -1
  41. package/lib/ReactRelayFragmentContainer.js +4 -4
  42. package/lib/ReactRelayFragmentMockRenderer.js +2 -2
  43. package/lib/ReactRelayLocalQueryRenderer.js +7 -8
  44. package/lib/ReactRelayPaginationContainer.js +18 -22
  45. package/lib/ReactRelayQueryFetcher.js +2 -2
  46. package/lib/ReactRelayQueryRenderer.js +4 -4
  47. package/lib/ReactRelayRefetchContainer.js +12 -14
  48. package/lib/ReactRelayTestMocker.js +7 -8
  49. package/lib/RelayContext.js +3 -2
  50. package/lib/assertFragmentMap.js +2 -1
  51. package/lib/buildReactRelayContainer.js +7 -7
  52. package/lib/getRootVariablesForFragments.js +1 -2
  53. package/lib/hooks.js +5 -5
  54. package/lib/index.js +7 -7
  55. package/lib/jest-react/internalAct.js +2 -2
  56. package/lib/multi-actor/ActorChange.js +2 -2
  57. package/lib/multi-actor/useRelayActorEnvironment.js +2 -2
  58. package/lib/relay-hooks/EntryPointContainer.react.js +3 -3
  59. package/lib/relay-hooks/FragmentResource.js +241 -45
  60. package/lib/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js +4 -4
  61. package/lib/relay-hooks/MatchContainer.js +1 -1
  62. package/lib/relay-hooks/QueryResource.js +83 -4
  63. package/lib/relay-hooks/SuspenseResource.js +130 -0
  64. package/lib/relay-hooks/loadQuery.js +8 -9
  65. package/lib/relay-hooks/preloadQuery_DEPRECATED.js +24 -10
  66. package/lib/relay-hooks/useBlockingPaginationFragment.js +2 -2
  67. package/lib/relay-hooks/useEntryPointLoader.js +2 -2
  68. package/lib/relay-hooks/useFetchTrackingRef.js +2 -1
  69. package/lib/relay-hooks/useFragment.js +8 -7
  70. package/lib/relay-hooks/useFragmentNode.js +4 -4
  71. package/lib/relay-hooks/useIsOperationNodeActive.js +2 -2
  72. package/lib/relay-hooks/useLazyLoadQuery.js +3 -3
  73. package/lib/relay-hooks/useLazyLoadQueryNode.js +4 -4
  74. package/lib/relay-hooks/useLoadMoreFunction.js +7 -9
  75. package/lib/relay-hooks/useMemoOperationDescriptor.js +2 -2
  76. package/lib/relay-hooks/useMemoVariables.js +2 -2
  77. package/lib/relay-hooks/useMutation.js +17 -6
  78. package/lib/relay-hooks/usePreloadedQuery.js +5 -5
  79. package/lib/relay-hooks/useQueryLoader.js +4 -4
  80. package/lib/relay-hooks/useRefetchableFragmentNode.js +10 -12
  81. package/lib/relay-hooks/useRelayEnvironment.js +2 -2
  82. package/lib/relay-hooks/useStaticFragmentNodeWarning.js +2 -2
  83. package/lib/relay-hooks/useSubscribeToInvalidationState.js +2 -1
  84. package/multi-actor/ActorChange.js.flow +3 -4
  85. package/multi-actor/useRelayActorEnvironment.js.flow +5 -7
  86. package/package.json +2 -2
  87. package/react-relay-hooks.js +2 -2
  88. package/react-relay-hooks.min.js +2 -2
  89. package/react-relay-legacy.js +2 -2
  90. package/react-relay-legacy.min.js +2 -2
  91. package/react-relay.js +2 -2
  92. package/react-relay.min.js +2 -2
  93. package/relay-hooks/EntryPointContainer.react.js.flow +8 -15
  94. package/relay-hooks/EntryPointTypes.flow.js.flow +18 -24
  95. package/relay-hooks/FragmentResource.js.flow +220 -34
  96. package/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js.flow +32 -46
  97. package/relay-hooks/MatchContainer.js.flow +3 -2
  98. package/relay-hooks/QueryResource.js.flow +119 -17
  99. package/relay-hooks/RelayEnvironmentProvider.js.flow +9 -9
  100. package/relay-hooks/SuspenseResource.js.flow +115 -0
  101. package/relay-hooks/__flowtests__/EntryPointTypes/EntryPointElementConfig-flowtest.js.flow +4 -3
  102. package/relay-hooks/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow +1 -1
  103. package/relay-hooks/__flowtests__/useBlockingPaginationFragment-flowtest.js.flow +10 -9
  104. package/relay-hooks/__flowtests__/useFragment-flowtest.js.flow +8 -7
  105. package/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js.flow +10 -9
  106. package/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js.flow +10 -9
  107. package/relay-hooks/__flowtests__/utils.js.flow +8 -12
  108. package/relay-hooks/loadEntryPoint.js.flow +6 -12
  109. package/relay-hooks/loadQuery.js.flow +22 -23
  110. package/relay-hooks/preloadQuery_DEPRECATED.js.flow +29 -13
  111. package/relay-hooks/prepareEntryPoint_DEPRECATED.js.flow +6 -12
  112. package/relay-hooks/useBlockingPaginationFragment.js.flow +12 -13
  113. package/relay-hooks/useEntryPointLoader.js.flow +7 -10
  114. package/relay-hooks/useFetchTrackingRef.js.flow +2 -2
  115. package/relay-hooks/useFragment.js.flow +26 -46
  116. package/relay-hooks/useFragmentNode.js.flow +5 -7
  117. package/relay-hooks/useIsOperationNodeActive.js.flow +3 -5
  118. package/relay-hooks/useIsParentQueryActive.js.flow +3 -4
  119. package/relay-hooks/useLazyLoadQuery.js.flow +9 -10
  120. package/relay-hooks/useLazyLoadQueryNode.js.flow +11 -13
  121. package/relay-hooks/useLoadMoreFunction.js.flow +19 -27
  122. package/relay-hooks/useMemoOperationDescriptor.js.flow +5 -7
  123. package/relay-hooks/useMemoVariables.js.flow +6 -6
  124. package/relay-hooks/useMutation.js.flow +26 -26
  125. package/relay-hooks/usePaginationFragment.js.flow +37 -46
  126. package/relay-hooks/usePreloadedQuery.js.flow +13 -19
  127. package/relay-hooks/useQueryLoader.js.flow +13 -16
  128. package/relay-hooks/useRefetchableFragment.js.flow +7 -8
  129. package/relay-hooks/useRefetchableFragmentNode.js.flow +22 -30
  130. package/relay-hooks/useRelayEnvironment.js.flow +2 -4
  131. package/relay-hooks/useStaticFragmentNodeWarning.js.flow +2 -3
  132. package/relay-hooks/useSubscribeToInvalidationState.js.flow +3 -6
  133. package/relay-hooks/useSubscription.js.flow +6 -7
@@ -13,12 +13,6 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const loadEntryPoint = require('./loadEntryPoint');
17
- const useIsMountedRef = require('./useIsMountedRef');
18
-
19
- const {useTrackLoadQueryInRender} = require('./loadQuery');
20
- const {useCallback, useEffect, useRef, useState} = require('react');
21
-
22
16
  import type {
23
17
  EntryPoint,
24
18
  EntryPointComponent,
@@ -27,6 +21,11 @@ import type {
27
21
  PreloadedEntryPoint,
28
22
  } from './EntryPointTypes.flow';
29
23
 
24
+ const loadEntryPoint = require('./loadEntryPoint');
25
+ const {useTrackLoadQueryInRender} = require('./loadQuery');
26
+ const useIsMountedRef = require('./useIsMountedRef');
27
+ const {useCallback, useEffect, useRef, useState} = require('react');
28
+
30
29
  type UseEntryPointLoaderHookReturnType<
31
30
  TEntryPointParams: {...},
32
31
  TPreloadedQueries: {...},
@@ -121,10 +120,8 @@ function useLoadEntryPoint<
121
120
  const [entryPointReference, setEntryPointReference] = useState<
122
121
  PreloadedEntryPoint<TEntryPointComponent> | NullEntryPointReference,
123
122
  >(initialEntryPointReferenceInternal);
124
- const [
125
- entryPointParams,
126
- setEntryPointParams,
127
- ] = useState<TEntryPointParams | null>(initialEntryPointParamsInternal);
123
+ const [entryPointParams, setEntryPointParams] =
124
+ useState<TEntryPointParams | null>(initialEntryPointParamsInternal);
128
125
 
129
126
  const disposeEntryPoint = useCallback(() => {
130
127
  if (isMountedRef.current) {
@@ -13,10 +13,10 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const {useCallback, useEffect, useRef} = require('react');
17
-
18
16
  import type {Subscription} from 'relay-runtime';
19
17
 
18
+ const {useCallback, useEffect, useRef} = require('react');
19
+
20
20
  /**
21
21
  * This hook returns a mutable React ref that holds the value of whether a
22
22
  * fetch request is in flight. The reason this is a mutable ref instead of
@@ -13,82 +13,62 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const useFragmentNode = require('./useFragmentNode');
17
- const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
16
+ import type {FragmentType, GraphQLTaggedNode} from 'relay-runtime';
18
17
 
19
18
  const {useTrackLoadQueryInRender} = require('./loadQuery');
19
+ const useFragmentNode = require('./useFragmentNode');
20
+ const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
20
21
  const {useDebugValue} = require('react');
21
22
  const {getFragment} = require('relay-runtime');
22
23
 
23
- import type {GraphQLTaggedNode, FragmentReference} from 'relay-runtime';
24
-
25
- // NOTE: These declares ensure that the type of the returned data is:
26
- // - non-nullable if the provided ref type is non-nullable
27
- // - nullable if the provided ref type is nullable
28
- // - array of non-nullable if the privoided ref type is an array of
29
- // non-nullable refs
30
- // - array of nullable if the privoided ref type is an array of nullable refs
31
-
24
+ // if the key is non-nullable, return non-nullable value
32
25
  declare function useFragment<
33
- TKey: {+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
26
+ TKey: {+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
34
27
  >(
35
- fragmentInput: GraphQLTaggedNode,
36
- fragmentRef: TKey,
37
- ): $Call<<TFragmentData>({+$data?: TFragmentData, ...}) => TFragmentData, TKey>;
28
+ fragment: GraphQLTaggedNode,
29
+ key: TKey,
30
+ ): $Call<<TData>({+$data?: TData, ...}) => TData, TKey>;
38
31
 
32
+ // if the key is nullable, return nullable value
39
33
  declare function useFragment<
40
- TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
34
+ TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
41
35
  >(
42
- fragmentInput: GraphQLTaggedNode,
43
- fragmentRef: TKey,
44
- ): $Call<
45
- <TFragmentData>(?{+$data?: TFragmentData, ...}) => ?TFragmentData,
46
- TKey,
47
- >;
36
+ fragment: GraphQLTaggedNode,
37
+ key: TKey,
38
+ ): $Call<<TData>(?{+$data?: TData, ...}) => ?TData, TKey>;
48
39
 
40
+ // if the key is a non-nullable array of keys, return non-nullable array
49
41
  declare function useFragment<
50
42
  TKey: $ReadOnlyArray<{
51
43
  +$data?: mixed,
52
- +$fragmentRefs: FragmentReference,
44
+ +$fragmentSpreads: FragmentType,
53
45
  ...
54
46
  }>,
55
47
  >(
56
- fragmentInput: GraphQLTaggedNode,
57
- fragmentRef: TKey,
58
- ): $Call<
59
- <TFragmentData>(
60
- $ReadOnlyArray<{+$data?: TFragmentData, ...}>,
61
- ) => TFragmentData,
62
- TKey,
63
- >;
48
+ fragment: GraphQLTaggedNode,
49
+ key: TKey,
50
+ ): $Call<<TData>($ReadOnlyArray<{+$data?: TData, ...}>) => TData, TKey>;
64
51
 
52
+ // if the key is a nullable array of keys, return nullable array
65
53
  declare function useFragment<
66
54
  TKey: ?$ReadOnlyArray<{
67
55
  +$data?: mixed,
68
- +$fragmentRefs: FragmentReference,
56
+ +$fragmentSpreads: FragmentType,
69
57
  ...
70
58
  }>,
71
59
  >(
72
- fragmentInput: GraphQLTaggedNode,
73
- fragmentRef: TKey,
74
- ): $Call<
75
- <TFragmentData>(
76
- ?$ReadOnlyArray<{+$data?: TFragmentData, ...}>,
77
- ) => ?TFragmentData,
78
- TKey,
79
- >;
60
+ fragment: GraphQLTaggedNode,
61
+ key: TKey,
62
+ ): $Call<<TData>(?$ReadOnlyArray<{+$data?: TData, ...}>) => ?TData, TKey>;
80
63
 
81
- function useFragment(
82
- fragmentInput: GraphQLTaggedNode,
83
- fragmentRef: mixed,
84
- ): mixed {
64
+ function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
85
65
  // We need to use this hook in order to be able to track if
86
66
  // loadQuery was called during render
87
67
  useTrackLoadQueryInRender();
88
68
 
89
- const fragmentNode = getFragment(fragmentInput);
69
+ const fragmentNode = getFragment(fragment);
90
70
  useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
91
- const {data} = useFragmentNode<_>(fragmentNode, fragmentRef, 'useFragment()');
71
+ const {data} = useFragmentNode<_>(fragmentNode, key, 'useFragment()');
92
72
  if (__DEV__) {
93
73
  // eslint-disable-next-line react-hooks/rules-of-hooks
94
74
  useDebugValue({fragment: fragmentNode.name, data});
@@ -13,14 +13,13 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const useRelayEnvironment = require('./useRelayEnvironment');
17
- const warning = require('warning');
16
+ import type {ReaderFragment} from 'relay-runtime';
18
17
 
19
18
  const {getFragmentResourceForEnvironment} = require('./FragmentResource');
19
+ const useRelayEnvironment = require('./useRelayEnvironment');
20
20
  const {useEffect, useRef, useState} = require('react');
21
21
  const {getFragmentIdentifier} = require('relay-runtime');
22
-
23
- import type {ReaderFragment} from 'relay-runtime';
22
+ const warning = require('warning');
24
23
 
25
24
  type ReturnType<TFragmentData: mixed> = {|
26
25
  data: TFragmentData,
@@ -51,9 +50,8 @@ function useFragmentNode<TFragmentData: mixed>(
51
50
  const isListeningForUpdatesRef = useRef(true);
52
51
  function enableStoreUpdates() {
53
52
  isListeningForUpdatesRef.current = true;
54
- const didMissUpdates = FragmentResource.checkMissedUpdates(
55
- fragmentResult,
56
- )[0];
53
+ const didMissUpdates =
54
+ FragmentResource.checkMissedUpdates(fragmentResult)[0];
57
55
  if (didMissUpdates) {
58
56
  handleDataUpdate();
59
57
  }
@@ -11,18 +11,16 @@
11
11
 
12
12
  'use strict';
13
13
 
14
- const React = require('react');
14
+ import type {ReaderFragment} from 'relay-runtime';
15
15
 
16
- const invariant = require('invariant');
17
16
  const useRelayEnvironment = require('./useRelayEnvironment');
18
-
17
+ const invariant = require('invariant');
18
+ const React = require('react');
19
19
  const {
20
20
  __internal: {getObservableForActiveRequest},
21
21
  getSelector,
22
22
  } = require('relay-runtime');
23
23
 
24
- import type {ReaderFragment} from 'relay-runtime';
25
-
26
24
  const {useEffect, useState, useMemo} = React;
27
25
 
28
26
  function useIsOperationNodeActive(
@@ -11,15 +11,14 @@
11
11
 
12
12
  'use strict';
13
13
 
14
+ import type {FragmentType, GraphQLTaggedNode} from 'relay-runtime';
15
+
14
16
  const useIsOperationNodeActive = require('./useIsOperationNodeActive');
15
17
  const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
16
-
17
18
  const {getFragment} = require('relay-runtime');
18
19
 
19
- import type {GraphQLTaggedNode, FragmentReference} from 'relay-runtime';
20
-
21
20
  function useIsParentQueryActive<
22
- TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
21
+ TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
23
22
  >(fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): boolean {
24
23
  const fragmentNode = getFragment(fragmentInput);
25
24
  useStaticFragmentNodeWarning(
@@ -13,15 +13,6 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
17
- const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
18
- const useRelayEnvironment = require('./useRelayEnvironment');
19
-
20
- const {useTrackLoadQueryInRender} = require('./loadQuery');
21
- const {
22
- __internal: {fetchQuery},
23
- } = require('relay-runtime');
24
-
25
16
  import type {
26
17
  CacheConfig,
27
18
  FetchPolicy,
@@ -31,6 +22,14 @@ import type {
31
22
  VariablesOf,
32
23
  } from 'relay-runtime';
33
24
 
25
+ const {useTrackLoadQueryInRender} = require('./loadQuery');
26
+ const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
27
+ const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
28
+ const useRelayEnvironment = require('./useRelayEnvironment');
29
+ const {
30
+ __internal: {fetchQuery},
31
+ } = require('relay-runtime');
32
+
34
33
  function useLazyLoadQuery<TQuery: OperationType>(
35
34
  gqlQuery: GraphQLTaggedNode,
36
35
  variables: VariablesOf<TQuery>,
@@ -40,7 +39,7 @@ function useLazyLoadQuery<TQuery: OperationType>(
40
39
  networkCacheConfig?: CacheConfig,
41
40
  UNSTABLE_renderPolicy?: RenderPolicy,
42
41
  |},
43
- ): $ElementType<TQuery, 'response'> {
42
+ ): TQuery['response'] {
44
43
  // We need to use this hook in order to be able to track if
45
44
  // loadQuery was called during render
46
45
  useTrackLoadQueryInRender();
@@ -13,18 +13,6 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const ProfilerContext = require('./ProfilerContext');
17
- const React = require('react');
18
-
19
- const useFetchTrackingRef = require('./useFetchTrackingRef');
20
- const useFragmentNode = require('./useFragmentNode');
21
- const useRelayEnvironment = require('./useRelayEnvironment');
22
-
23
- const {
24
- getQueryResourceForEnvironment,
25
- getQueryCacheIdentifier,
26
- } = require('./QueryResource');
27
-
28
16
  import type {
29
17
  FetchPolicy,
30
18
  GraphQLResponse,
@@ -34,6 +22,16 @@ import type {
34
22
  RenderPolicy,
35
23
  } from 'relay-runtime';
36
24
 
25
+ const ProfilerContext = require('./ProfilerContext');
26
+ const {
27
+ getQueryCacheIdentifier,
28
+ getQueryResourceForEnvironment,
29
+ } = require('./QueryResource');
30
+ const useFetchTrackingRef = require('./useFetchTrackingRef');
31
+ const useFragmentNode = require('./useFragmentNode');
32
+ const useRelayEnvironment = require('./useRelayEnvironment');
33
+ const React = require('react');
34
+
37
35
  const {useContext, useEffect, useState, useRef} = React;
38
36
 
39
37
  function useLazyLoadQueryNode<TQuery: OperationType>({
@@ -50,7 +48,7 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
50
48
  fetchPolicy?: ?FetchPolicy,
51
49
  fetchKey?: ?string | ?number,
52
50
  renderPolicy?: ?RenderPolicy,
53
- |}): $ElementType<TQuery, 'response'> {
51
+ |}): TQuery['response'] {
54
52
  const environment = useRelayEnvironment();
55
53
  const profilerContext = useContext(ProfilerContext);
56
54
  const QueryResource = getQueryResourceForEnvironment(environment);
@@ -13,34 +13,33 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const invariant = require('invariant');
16
+ import type {
17
+ ConcreteRequest,
18
+ Direction,
19
+ Disposable,
20
+ GraphQLResponse,
21
+ Observer,
22
+ OperationType,
23
+ ReaderFragment,
24
+ ReaderPaginationMetadata,
25
+ VariablesOf,
26
+ } from 'relay-runtime';
27
+
17
28
  const useFetchTrackingRef = require('./useFetchTrackingRef');
18
29
  const useIsMountedRef = require('./useIsMountedRef');
19
30
  const useIsOperationNodeActive = require('./useIsOperationNodeActive');
20
31
  const useRelayEnvironment = require('./useRelayEnvironment');
21
- const warning = require('warning');
22
-
32
+ const invariant = require('invariant');
23
33
  const {useCallback, useEffect, useState} = require('react');
24
34
  const {
25
35
  ConnectionInterface,
26
36
  __internal: {fetchQuery},
27
37
  createOperationDescriptor,
28
38
  getPaginationVariables,
29
- getValueAtPath,
30
39
  getSelector,
40
+ getValueAtPath,
31
41
  } = require('relay-runtime');
32
-
33
- import type {
34
- ConcreteRequest,
35
- Direction,
36
- Disposable,
37
- GraphQLResponse,
38
- Observer,
39
- OperationType,
40
- ReaderFragment,
41
- ReaderPaginationMetadata,
42
- VariablesOf,
43
- } from 'relay-runtime';
42
+ const warning = require('warning');
44
43
 
45
44
  export type LoadMoreFn<TQuery: OperationType> = (
46
45
  count: number,
@@ -83,12 +82,8 @@ function useLoadMoreFunction<TQuery: OperationType>(
83
82
  identifierField,
84
83
  } = args;
85
84
  const environment = useRelayEnvironment();
86
- const {
87
- isFetchingRef,
88
- startFetch,
89
- disposeFetch,
90
- completeFetch,
91
- } = useFetchTrackingRef();
85
+ const {isFetchingRef, startFetch, disposeFetch, completeFetch} =
86
+ useFetchTrackingRef();
92
87
  const identifierValue =
93
88
  identifierField != null &&
94
89
  fragmentData != null &&
@@ -97,9 +92,8 @@ function useLoadMoreFunction<TQuery: OperationType>(
97
92
  : null;
98
93
  const isMountedRef = useIsMountedRef();
99
94
  const [mirroredEnvironment, setMirroredEnvironment] = useState(environment);
100
- const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] = useState(
101
- fragmentIdentifier,
102
- );
95
+ const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] =
96
+ useState(fragmentIdentifier);
103
97
 
104
98
  const isParentQueryActive = useIsOperationNodeActive(
105
99
  fragmentNode,
@@ -189,7 +183,6 @@ function useLoadMoreFunction<TQuery: OperationType>(
189
183
  const parentVariables = fragmentSelector.owner.variables;
190
184
  const fragmentVariables = fragmentSelector.variables;
191
185
  const extraVariables = options?.UNSTABLE_extraVariables;
192
- // $FlowFixMe[cannot-spread-interface]
193
186
  const baseVariables = {
194
187
  ...parentVariables,
195
188
  ...fragmentVariables,
@@ -199,7 +192,6 @@ function useLoadMoreFunction<TQuery: OperationType>(
199
192
  count,
200
193
  cursor,
201
194
  baseVariables,
202
- // $FlowFixMe[cannot-spread-interface]
203
195
  {...extraVariables},
204
196
  paginationMetadata,
205
197
  );
@@ -13,19 +13,17 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const React = require('react');
17
-
18
- const useMemoVariables = require('./useMemoVariables');
19
-
20
- const {createOperationDescriptor, getRequest} = require('relay-runtime');
21
-
22
16
  import type {
17
+ CacheConfig,
23
18
  GraphQLTaggedNode,
24
19
  OperationDescriptor,
25
20
  Variables,
26
- CacheConfig,
27
21
  } from 'relay-runtime';
28
22
 
23
+ const useMemoVariables = require('./useMemoVariables');
24
+ const React = require('react');
25
+ const {createOperationDescriptor, getRequest} = require('relay-runtime');
26
+
29
27
  const {useMemo} = React;
30
28
 
31
29
  function useMemoOperationDescriptor(
@@ -13,11 +13,10 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const React = require('react');
16
+ import type {Variables} from 'relay-runtime';
17
17
 
18
18
  const areEqual = require('areEqual');
19
-
20
- import type {Variables} from 'relay-runtime';
19
+ const React = require('react');
21
20
 
22
21
  const {useMemo, useRef, useState} = React;
23
22
 
@@ -45,9 +44,10 @@ function useMemoVariables<TVariables: Variables | null>(
45
44
  // NOTE: We disable react-hooks-deps warning because we explicitly
46
45
  // don't want to memoize on object identity
47
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
48
- const memoVariables = useMemo(() => variables, [
49
- variablesChangedGenerationRef.current,
50
- ]);
47
+ const memoVariables = useMemo(
48
+ () => variables,
49
+ [variablesChangedGenerationRef.current],
50
+ );
51
51
  return [memoVariables, variablesChangedGenerationRef.current ?? 0];
52
52
  }
53
53
 
@@ -13,46 +13,43 @@
13
13
 
14
14
  'use strict';
15
15
 
16
- const React = require('react');
17
-
18
- const useRelayEnvironment = require('./useRelayEnvironment');
19
-
20
- const {commitMutation: defaultCommitMutation} = require('relay-runtime');
21
- const {useState, useEffect, useRef, useCallback} = React;
22
- const useIsMountedRef = require('./useIsMountedRef');
23
-
24
16
  import type {
25
- GraphQLTaggedNode,
17
+ DeclarativeMutationConfig,
26
18
  Disposable,
19
+ GraphQLTaggedNode,
20
+ IEnvironment,
27
21
  MutationConfig,
28
22
  MutationParameters,
29
- IEnvironment,
30
23
  PayloadError,
31
- DeclarativeMutationConfig,
32
24
  SelectorStoreUpdater,
33
25
  UploadableMap,
34
26
  } from 'relay-runtime';
35
27
 
28
+ const useIsMountedRef = require('./useIsMountedRef');
29
+ const useRelayEnvironment = require('./useRelayEnvironment');
30
+ const React = require('react');
31
+ const {commitMutation: defaultCommitMutation} = require('relay-runtime');
32
+
33
+ const {useState, useEffect, useRef, useCallback} = React;
34
+
36
35
  export type UseMutationConfig<TMutation: MutationParameters> = {|
37
36
  configs?: Array<DeclarativeMutationConfig>,
38
37
  onError?: ?(error: Error) => void,
39
38
  onCompleted?: ?(
40
- response: $ElementType<TMutation, 'response'>,
39
+ response: TMutation['response'],
41
40
  errors: ?Array<PayloadError>,
42
41
  ) => void,
42
+ onNext?: ?() => void,
43
43
  onUnsubscribe?: ?() => void,
44
- optimisticResponse?: $ElementType<
45
- {
46
- +rawResponse?: {...},
47
- ...TMutation,
48
- ...
49
- },
50
- 'rawResponse',
51
- >,
52
- optimisticUpdater?: ?SelectorStoreUpdater,
53
- updater?: ?SelectorStoreUpdater,
44
+ optimisticResponse?: {
45
+ +rawResponse?: {...},
46
+ ...TMutation,
47
+ ...
48
+ }['rawResponse'],
49
+ optimisticUpdater?: ?SelectorStoreUpdater<TMutation['response']>,
50
+ updater?: ?SelectorStoreUpdater<TMutation['response']>,
54
51
  uploadables?: UploadableMap,
55
- variables: $ElementType<TMutation, 'variables'>,
52
+ variables: TMutation['variables'],
56
53
  |};
57
54
 
58
55
  function useMutation<TMutation: MutationParameters>(
@@ -105,15 +102,18 @@ function useMutation<TMutation: MutationParameters>(
105
102
  mutation,
106
103
  onCompleted: (response, errors) => {
107
104
  cleanup(disposable);
108
- config.onCompleted && config.onCompleted(response, errors);
105
+ config.onCompleted?.(response, errors);
109
106
  },
110
107
  onError: error => {
111
108
  cleanup(disposable);
112
- config.onError && config.onError(error);
109
+ config.onError?.(error);
113
110
  },
114
111
  onUnsubscribe: () => {
115
112
  cleanup(disposable);
116
- config.onUnsubscribe && config.onUnsubscribe();
113
+ config.onUnsubscribe?.();
114
+ },
115
+ onNext: () => {
116
+ config.onNext?.();
117
117
  },
118
118
  });
119
119
  inFlightMutationsRef.current.add(disposable);
@@ -13,10 +13,19 @@
13
13
 
14
14
  'use strict';
15
15
 
16
+ import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
17
+ import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
18
+ import type {
19
+ FragmentType,
20
+ GraphQLResponse,
21
+ GraphQLTaggedNode,
22
+ Observer,
23
+ OperationType,
24
+ } from 'relay-runtime';
25
+
16
26
  const useLoadMoreFunction = require('./useLoadMoreFunction');
17
27
  const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
18
28
  const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
19
-
20
29
  const {useCallback, useDebugValue, useState} = require('react');
21
30
  const {
22
31
  getFragment,
@@ -24,16 +33,6 @@ const {
24
33
  getPaginationMetadata,
25
34
  } = require('relay-runtime');
26
35
 
27
- import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
28
- import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
29
- import type {
30
- GraphQLResponse,
31
- GraphQLTaggedNode,
32
- Observer,
33
- OperationType,
34
- FragmentReference,
35
- } from 'relay-runtime';
36
-
37
36
  export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
38
37
  data: TFragmentData,
39
38
  loadNext: LoadMoreFn<TQuery>,
@@ -47,7 +46,7 @@ export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
47
46
 
48
47
  function usePaginationFragment<
49
48
  TQuery: OperationType,
50
- TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
49
+ TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
51
50
  >(
52
51
  fragmentInput: GraphQLTaggedNode,
53
52
  parentFragmentRef: TKey,
@@ -85,42 +84,34 @@ function usePaginationFragment<
85
84
  const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
86
85
 
87
86
  // Backward pagination
88
- const [
89
- loadPrevious,
90
- hasPrevious,
91
- isLoadingPrevious,
92
- disposeFetchPrevious,
93
- ] = useLoadMore<TQuery>({
94
- componentDisplayName,
95
- connectionPathInFragmentData,
96
- direction: 'backward',
97
- fragmentData,
98
- fragmentIdentifier,
99
- fragmentNode,
100
- fragmentRef,
101
- identifierField,
102
- paginationMetadata,
103
- paginationRequest,
104
- });
87
+ const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
88
+ useLoadMore<TQuery>({
89
+ componentDisplayName,
90
+ connectionPathInFragmentData,
91
+ direction: 'backward',
92
+ fragmentData,
93
+ fragmentIdentifier,
94
+ fragmentNode,
95
+ fragmentRef,
96
+ identifierField,
97
+ paginationMetadata,
98
+ paginationRequest,
99
+ });
105
100
 
106
101
  // Forward pagination
107
- const [
108
- loadNext,
109
- hasNext,
110
- isLoadingNext,
111
- disposeFetchNext,
112
- ] = useLoadMore<TQuery>({
113
- componentDisplayName,
114
- connectionPathInFragmentData,
115
- direction: 'forward',
116
- fragmentData,
117
- fragmentIdentifier,
118
- fragmentNode,
119
- fragmentRef,
120
- identifierField,
121
- paginationMetadata,
122
- paginationRequest,
123
- });
102
+ const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
103
+ useLoadMore<TQuery>({
104
+ componentDisplayName,
105
+ connectionPathInFragmentData,
106
+ direction: 'forward',
107
+ fragmentData,
108
+ fragmentIdentifier,
109
+ fragmentNode,
110
+ fragmentRef,
111
+ identifierField,
112
+ paginationMetadata,
113
+ paginationRequest,
114
+ });
124
115
 
125
116
  const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
126
117
  (variables, options) => {