diff --git a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx b/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx index 537267ecc..1a6c2d9cc 100644 --- a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx +++ b/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import { DateTime } from 'luxon'; import { useRecoilState } from 'recoil'; +import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict'; import { useCreateOneObjectRecord } from '@/object-record/hooks/useCreateOneObjectRecord'; import { useFindOneObjectRecord } from '@/object-record/hooks/useFindOneObjectRecord'; import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord'; @@ -45,6 +46,7 @@ export const SettingsDevelopersApiKeyDetail = () => { const [generatedApiKey] = useRecoilState( generatedApiKeyFamilyState(apiKeyId), ); + const { performOptimisticEvict } = useOptimisticEvict(); const [generateOneApiKeyToken] = useGenerateOneApiKeyTokenMutation(); const { createOneObject: createOneApiKey } = useCreateOneObjectRecord( @@ -66,6 +68,7 @@ export const SettingsDevelopersApiKeyDetail = () => { idToUpdate: apiKeyId, input: { revokedAt: DateTime.now().toString() }, }); + performOptimisticEvict('ApiKeyV2', 'id', apiKeyId); if (redirect) { navigate('/settings/developers/api-keys'); } diff --git a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx b/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx index e82efc319..987ed8742 100644 --- a/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx +++ b/front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx @@ -3,10 +3,11 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect'; +import { useFindOneObjectMetadataItem } from '@/object-metadata/hooks/useFindOneObjectMetadataItem'; +import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition'; import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords'; 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 { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem'; import { formatExpirations } from '@/settings/developers/utils/format-expiration'; import { IconPlus, IconSettings } from '@/ui/display/icon'; @@ -41,11 +42,15 @@ const StyledH1Title = styled(H1Title)` export const SettingsDevelopersApiKeys = () => { const navigate = useNavigate(); - const { registerOptimisticEffect } = useOptimisticEffect('ApiKeyV2'); const [apiKeys, setApiKeys] = useState>([]); + const { registerOptimisticEffect } = useOptimisticEffect('apiKeyV2'); + const { foundObjectMetadataItem } = useFindOneObjectMetadataItem({ + objectNameSingular: 'apiKeyV2', + }); + const filter = { revokedAt: { eq: null } }; useFindManyObjectRecords({ objectNamePlural: 'apiKeysV2', - filter: { revokedAt: { eq: null } }, + filter, onCompleted: (data) => { setApiKeys( formatExpirations( @@ -56,10 +61,14 @@ export const SettingsDevelopersApiKeys = () => { })), ), ); - registerOptimisticEffect({ - variables: {}, - definition: getApiKeysOptimisticEffectDefinition, - }); + if (foundObjectMetadataItem) { + registerOptimisticEffect({ + variables: { filter }, + definition: getRecordOptimisticEffectDefinition({ + objectMetadataItem: foundObjectMetadataItem, + }), + }); + } }, });