admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix cache management (#2264)

Browse Source
This commit is contained in:
martmull
2023-10-27 18:20:11 +02:00
committed by GitHub
parent acbcd2f162
commit 35237c05f3
11 changed files with 85 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
View File

@ -1,13 +1,12 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { getOperationName } from '@apollo/client/utilities';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
import { GET_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
import { computeNewExpirationDate } from '@/settings/developers/utils/compute-new-expiration-date';
@ -42,6 +41,7 @@ const StyledInputContainer = styled.div`
export const SettingsDevelopersApiKeyDetail = () => {
const navigate = useNavigate();
const { apiKeyId = '' } = useParams();
const { triggerOptimisticEffects } = useOptimisticEffect();
const setGeneratedApi = useGeneratedApiKeys();
const [generatedApiKey] = useRecoilState(
@ -59,7 +59,10 @@ export const SettingsDevelopersApiKeyDetail = () => {
const deleteIntegration = async (redirect = true) => {
await deleteApiKey({
variables: { apiKeyId },
refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
update: (cache) =>
cache.evict({
id: cache.identify({ __typename: 'ApiKey', id: apiKeyId }),
}),
});
if (redirect) {
navigate('/settings/developers/api-keys');
@ -79,7 +82,11 @@ export const SettingsDevelopersApiKeyDetail = () => {
expiresAt: newExpiresAt,
},
},
refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
update: (_cache, { data }) => {
if (data?.createOneApiKey) {
triggerOptimisticEffects('ApiKey', [data?.createOneApiKey]);
}
},
});
await deleteIntegration(false);
if (apiKey.data?.createOneApiKey) {

12
front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
View File

@ -1,8 +1,10 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
import { getApiKeysOptimisticEffectDefinition } from '@/settings/developers/optimistic-effect-definitions/getApiKeysOptimisticEffectDefinition';
import { formatExpirations } from '@/settings/developers/utils/format-expiration';
import { IconPlus, IconSettings } from '@/ui/display/icon';
import { H1Title } from '@/ui/display/typography/components/H1Title';
@ -37,7 +39,15 @@ const StyledH1Title = styled(H1Title)`
export const SettingsDevelopersApiKeys = () => {
const navigate = useNavigate();
const apiKeysQuery = useGetApiKeysQuery();
const { registerOptimisticEffect } = useOptimisticEffect();
const apiKeysQuery = useGetApiKeysQuery({
onCompleted: () => {
registerOptimisticEffect({
variables: {},
definition: getApiKeysOptimisticEffectDefinition,
});
},
});
const apiKeys = apiKeysQuery.data ? formatExpirations(apiKeysQuery.data) : [];
return (

10
front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
View File

@ -1,13 +1,12 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getOperationName } from '@apollo/client/utilities';
import { DateTime } from 'luxon';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { ExpirationDates } from '@/settings/developers/constants/expirationDates';
import { GET_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -20,6 +19,7 @@ import { useInsertOneApiKeyMutation } from '~/generated/graphql';
export const SettingsDevelopersApiKeysNew = () => {
const [insertOneApiKey] = useInsertOneApiKeyMutation();
const { triggerOptimisticEffects } = useOptimisticEffect();
const navigate = useNavigate();
const setGeneratedApi = useGeneratedApiKeys();
const [formValues, setFormValues] = useState<{
@ -41,7 +41,11 @@ export const SettingsDevelopersApiKeysNew = () => {
: null,
},
},
refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
update: (_cache, { data }) => {
if (data?.createOneApiKey) {
triggerOptimisticEffects('ApiKey', [data?.createOneApiKey]);
}
},
});
if (apiKey.data?.createOneApiKey) {
setGeneratedApi(