Files
twenty/packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneObjectMetadataItem.ts
Pacifique LINJANJA 7fa05bf539 feat (improvement): update the createOneObjectMetaItem (#5673)
# This PR

- Fix #5278 
- Updates the implementation of the `createOneObjectMataItem` hook to
reduce the number of api calls
- Users can now navigate to the newly created object first and the
graphql api calls to cache data are happening in the background - this
will improve the user experience and reduce the create object api call
time by >2
<img width="1508" alt="Screenshot 2024-05-30 at 12 00 15"
src="https://github.com/twentyhq/twenty/assets/61581306/46513fd1-d46e-40bc-a036-07e3acdf2870">

In the issue description, it also suggested to have a loading indicator
while creating the object, it seems like on #5352 we adopted to disable
it while creating the object - which looks good to me and it works, let
me know if we still need the loading indicator instead @Bonapara

Looking forward to getting your feedback
cc: @charlesBochet

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
2024-06-03 12:12:04 +02:00

56 lines
1.7 KiB
TypeScript

import { ApolloClient, useApolloClient, useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
import {
CreateObjectInput,
CreateOneObjectMetadataItemMutation,
CreateOneObjectMetadataItemMutationVariables,
} from '~/generated-metadata/graphql';
import { CREATE_ONE_OBJECT_METADATA_ITEM } from '../graphql/mutations';
import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
import { useApolloMetadataClient } from './useApolloMetadataClient';
export const useCreateOneObjectMetadataItem = () => {
const apolloMetadataClient = useApolloMetadataClient();
const apolloClient = useApolloClient();
const { findManyRecordsQuery } = useFindManyRecordsQuery({
objectNameSingular: CoreObjectNameSingular.View,
});
const [mutate] = useMutation<
CreateOneObjectMetadataItemMutation,
CreateOneObjectMetadataItemMutationVariables
>(CREATE_ONE_OBJECT_METADATA_ITEM, {
client: apolloMetadataClient ?? ({} as ApolloClient<any>),
});
const createOneObjectMetadataItem = async (input: CreateObjectInput) => {
const createdObjectMetadata = await mutate({
variables: {
input: { object: input },
},
awaitRefetchQueries: true,
refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
});
return createdObjectMetadata;
};
const findManyRecordsCache = async () => {
await apolloClient.query({
query: findManyRecordsQuery,
fetchPolicy: 'network-only',
});
};
return {
createOneObjectMetadataItem,
findManyRecordsCache,
};
};