Prevent infinite re-renders in extensions (#457)
Regression introduced with 593acc7f89
This commit is contained in:
@@ -26,7 +26,7 @@ import {
|
|||||||
useSubscription,
|
useSubscription,
|
||||||
} from '@apollo/client';
|
} from '@apollo/client';
|
||||||
import { OperationVariables } from '@apollo/client/core';
|
import { OperationVariables } from '@apollo/client/core';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { IRestClient, RestClient } from '@/lib/requests/client/RestClient.ts';
|
import { IRestClient, RestClient } from '@/lib/requests/client/RestClient.ts';
|
||||||
import * as storage from '@/util/localStorage.tsx';
|
import * as storage from '@/util/localStorage.tsx';
|
||||||
import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
|
import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
|
||||||
@@ -876,33 +876,48 @@ export class RequestManager {
|
|||||||
{},
|
{},
|
||||||
{ refetchQueries: [GET_EXTENSIONS], ...options },
|
{ refetchQueries: [GET_EXTENSIONS], ...options },
|
||||||
);
|
);
|
||||||
|
const [, setUpdatedCache] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (result.loading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!result.data?.fetchExtensions.extensions) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (result.data?.fetchExtensions.extensions) {
|
|
||||||
this.cache.cacheResponse(EXTENSION_LIST_CACHE_KEY, undefined, result);
|
this.cache.cacheResponse(EXTENSION_LIST_CACHE_KEY, undefined, result);
|
||||||
}
|
setUpdatedCache({});
|
||||||
|
}, [result.loading]);
|
||||||
|
|
||||||
const cachedResult = this.cache.getResponseFor<typeof result>(EXTENSION_LIST_CACHE_KEY, undefined, 1000 * 60);
|
const cachedResult = this.cache.getResponseFor<typeof result>(EXTENSION_LIST_CACHE_KEY, undefined, 1000 * 60);
|
||||||
const normalizedCachedResult = !cachedResult
|
const normalizedCachedResult = useMemo(
|
||||||
? result
|
() =>
|
||||||
: {
|
!cachedResult
|
||||||
...cachedResult,
|
? result
|
||||||
data: !cachedResult?.data?.fetchExtensions.extensions
|
: {
|
||||||
? cachedResult?.data
|
...cachedResult,
|
||||||
: {
|
data: !cachedResult?.data?.fetchExtensions.extensions
|
||||||
...cachedResult.data,
|
? cachedResult?.data
|
||||||
fetchExtensions: {
|
: {
|
||||||
...cachedResult.data.fetchExtensions,
|
...cachedResult.data,
|
||||||
extensions: cachedResult.data.fetchExtensions.extensions.map(
|
fetchExtensions: {
|
||||||
(extension) =>
|
...cachedResult.data.fetchExtensions,
|
||||||
this.graphQLClient.client.cache.readFragment<
|
extensions: cachedResult.data.fetchExtensions.extensions.map(
|
||||||
GetExtensionsFetchMutation['fetchExtensions']['extensions'][0]
|
(extension) =>
|
||||||
>({
|
this.graphQLClient.client.cache.readFragment<
|
||||||
id: this.graphQLClient.client.cache.identify(extension),
|
GetExtensionsFetchMutation['fetchExtensions']['extensions'][0]
|
||||||
fragment: FULL_EXTENSION_FIELDS,
|
>({
|
||||||
}) ?? extension,
|
id: this.graphQLClient.client.cache.identify(extension),
|
||||||
),
|
fragment: FULL_EXTENSION_FIELDS,
|
||||||
},
|
}) ?? extension,
|
||||||
},
|
),
|
||||||
};
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[this.cache.getFetchTimestampFor(EXTENSION_LIST_CACHE_KEY, undefined)],
|
||||||
|
);
|
||||||
|
|
||||||
const wrappedMutate = async (mutateOptions: Parameters<typeof mutate>[0]) => {
|
const wrappedMutate = async (mutateOptions: Parameters<typeof mutate>[0]) => {
|
||||||
if (cachedResult) {
|
if (cachedResult) {
|
||||||
|
|||||||
Reference in New Issue
Block a user