Fix/apollo client spamming infinite requets on failure (#450)

* Remove abort controller by default from requests

Apollo client is, for whatever reason, considering it a new hook call when passing an abort controller to be passed to the actual request.
On request failures this then causes infinite requests due to it being a new hook call.

* Move side effect into useEffect

This was missed and started causing issues after the changes of 60429d9d98544e1e49a112aacf77bdbb831740ec.
Due to the changes, the component did not re-render unnecessarily which caused the component not to re-render with the fetched data

* Reset fetching initial pages state

The state was never reset, thus, in case of an error, the initial pages fetch was never triggered again
This commit is contained in:
schroda
2023-11-11 23:42:58 +01:00
committed by GitHub
parent 291e1899f9
commit 345fbcb5c7
3 changed files with 23 additions and 14 deletions

View File

@@ -225,9 +225,11 @@ type CustomApolloOptions = {
* which - I assume - results in apollo to handle this as a completely new hook call.
* Due to this, when e.g. calling "fetchMore", "loading" and "networkStatus" do not get updated when enabling "notifyOnNetworkStatusChange".
*
* By not passing an abort signal, the states get correctly updated, BUT it won't be possible to abort the request.
* It also causes apollo to spam requests in case of request failures on every rerender.
*
* Instead of adding the abort signal by default, it has to be added manually which will cause these stated issues (and potentially more?)
*/
omitAbortSignal?: boolean;
addAbortSignal?: boolean;
};
type QueryOptions<Variables extends OperationVariables = OperationVariables, Data = any> = Partial<
ApolloQueryOptions<Variables, Data>
@@ -251,7 +253,7 @@ type ApolloPaginatedMutationOptions<Data = any, Variables extends OperationVaria
type SubscriptionHookOptions<Data = any, Variables extends OperationVariables = OperationVariables> = Partial<
ApolloSubscriptionHookOptions<Data, Variables>
> &
Omit<CustomApolloOptions, 'omitAbortSignal'> & { omitAbortSignal?: never };
Omit<CustomApolloOptions, 'addAbortSignal'> & { addAbortSignal?: never };
type AbortableRequest = { abortRequest: AbortController['abort'] };
@@ -552,16 +554,21 @@ export class RequestManager {
areFetchingInitialPages: boolean,
areInitialPagesFetched: boolean,
setRevalidationDone: (isDone: boolean) => void,
cacheInitialPagesKey: string,
cacheFetchingInitialPagesKey: string,
getVariablesFor: (page: number) => Variables,
initialPages: number,
fetchPage: (page: number) => Promise<FetchResult<Data>>,
hasNextPage: (result: FetchResult<Data>) => boolean,
): void {
const shouldFetchInitialPages = !options?.skipRequest && !areFetchingInitialPages && !areInitialPagesFetched;
if (shouldFetchInitialPages) {
useEffect(() => {
const shouldFetchInitialPages =
!options?.skipRequest && !areFetchingInitialPages && !areInitialPagesFetched;
if (!shouldFetchInitialPages) {
return;
}
setRevalidationDone(true);
this.cache.cacheResponse(cacheInitialPagesKey, getVariablesFor(0), true);
this.cache.cacheResponse(cacheFetchingInitialPagesKey, getVariablesFor(0), true);
const loadInitialPages = async (initialPage: number) => {
const areAllPagesFetched = initialPage > initialPages;
@@ -576,8 +583,10 @@ export class RequestManager {
}
};
loadInitialPages(1);
}
loadInitialPages(1).finally(() =>
this.cache.cacheResponse(cacheFetchingInitialPagesKey, getVariablesFor(0), false),
);
}, [!options?.skipRequest, !areFetchingInitialPages, !areInitialPagesFetched]);
}
private returnPaginatedMutationResult<Data = any, Variables extends OperationVariables = OperationVariables>(
@@ -722,7 +731,7 @@ export class RequestManager {
context: {
...options?.context,
fetchOptions: {
signal: options?.omitAbortSignal ? undefined : signal,
signal: options?.addAbortSignal ? signal : undefined,
...options?.context?.fetchOptions,
},
},
@@ -738,7 +747,7 @@ export class RequestManager {
context: {
...options?.context,
fetchOptions: {
signal: options?.omitAbortSignal ? undefined : signal,
signal: options?.addAbortSignal ? signal : undefined,
...options?.context?.fetchOptions,
},
},
@@ -754,7 +763,7 @@ export class RequestManager {
context: {
...options?.context,
fetchOptions: {
signal: options?.omitAbortSignal ? undefined : signal,
signal: options?.addAbortSignal ? signal : undefined,
...options?.context?.fetchOptions,
},
},
@@ -770,7 +779,7 @@ export class RequestManager {
context: {
...options?.context,
fetchOptions: {
signal: options?.omitAbortSignal ? undefined : signal,
signal: options?.addAbortSignal ? signal : undefined,
...options?.context?.fetchOptions,
},
},