@@ -122,7 +122,12 @@ interface UseWithSourceState {
122122export const useWithSource = (
123123 sourceId = 'default' ,
124124 indexToAdd ?: string [ ] | null ,
125- onlyCheckIndexToAdd ?: boolean
125+ onlyCheckIndexToAdd ?: boolean ,
126+ // Fun fact: When using this hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal),
127+ // the apolloClient will perform queryDeduplication and prevent the first query from executing. A deep compare is not
128+ // performed on `indices`, so another field must be passed to circumvent this.
129+ // For details, see https://github.com/apollographql/react-apollo/issues/2202
130+ queryDeduplication = 'default'
126131) => {
127132 const [ configIndex ] = useUiSetting$ < string [ ] > ( DEFAULT_INDEX_KEY ) ;
128133 const defaultIndex = useMemo < string [ ] > ( ( ) => {
@@ -154,12 +159,16 @@ export const useWithSource = (
154159 setState ( ( prevState ) => ( { ...prevState , loading : true } ) ) ;
155160
156161 try {
157- const result = await apolloClient . query < SourceQuery . Query , SourceQuery . Variables > ( {
162+ const result = await apolloClient . query <
163+ SourceQuery . Query ,
164+ SourceQuery . Variables & { queryDeduplication : string }
165+ > ( {
158166 query : sourceQuery ,
159- fetchPolicy : 'network-only ' ,
167+ fetchPolicy : 'cache-first ' ,
160168 variables : {
161169 sourceId,
162170 defaultIndex,
171+ queryDeduplication,
163172 } ,
164173 context : {
165174 fetchOptions : {
@@ -206,7 +215,7 @@ export const useWithSource = (
206215 isSubscribed = false ;
207216 return abortCtrl . abort ( ) ;
208217 } ;
209- } , [ apolloClient , sourceId , defaultIndex ] ) ;
218+ } , [ apolloClient , sourceId , defaultIndex , queryDeduplication ] ) ;
210219
211220 return state ;
212221} ;
0 commit comments