Combine CRUD into Save-Hook

[zirkelc]

When I'm dealing with CRUD operations, I usually like to combine them into one convenient useSave hook which handles the GetQuery, CreateMutation, UpdateMutation and DeleteMutation. The useSave hook has an optional id parameter to get an existing item and uses this id to distinguish between create or update in case of a change:

export function useSaveUser(variables?: GetUserQueryVariables>) {
  const id = variables?.id || '';
  // these hooks are generated by graphql-codegen with react-query plugin
  const getQuery = useGetUserQuery({ id }, { enabled: !!id });
  const createMutation = useCreateUserMutation();
  const updateMutation = useUpdateUserMutation();
  const deleteMutation = useDeleteUserMutation();

  return {
    data: getQuery.data?.getUser,
    save: async (data: User) => {
      const { id, ...input } = data;

      return id
        ? updateMutation.mutateAsync({ input: { ...input, id } }).then((d) => d.updateUser)
        : createMutation.mutateAsync({ input: { ...input } }).then((d) => d.createUser);
    },
    delete: async () => deleteMutation.mutateAsync({ id }),
    isLoading: getQuery.isLoading,
    isLoadingError: getQuery.isError,
    isSaving: id ? updateMutation.isLoading : createMutation.isLoading,
    isSavingError: id ? updateMutation.isError : createMutation.isError,
    isDeleting: deleteMutation.isLoading,
    isDeletingError: deleteMutation.isError,
  };
}

I'm aware that creating 4 hooks (get, create, update, delete) could be an overhead in certain situations. But for Components like CreateUser or EditUser I would need 3 out of 4 hooks anyway. By combining all 4 hooks into one, I can avoid the separation of Create and Edit, which share the same UI anyway. Thus, I have only one SaveUser component with the corresponding useSave hook.

Is this overhead negligible or will I run in performance issues sometime? Are there any options to improve it?

[TkDodo]

You can combine custom hooks in whatever way you prefer, and it depends on your use-case. One disadvantage I can see of this approach that often times, updating and fetching are separated in components (like, a list component does the fetching while a detail component will then do the mutation).

since I prefer calling hooks where I need them, if I were to call the hook to trigger a mutation, I would implicitly also get a query observer (+ refetches) that I might not need in this case.

Apart from that, please be aware that with mutateAsync, you need to also handle errors yourselves or you'll get an unhandled promise rejection. I would say mutateAsync is only needed if you want to perform concurrent mutations of you need the Promise result for some other reason. In any other case, you can use .mutate and maybe also leverage the callbacks (onSuccess). data will also be available in the result of the mutation.

[zirkelc]

Thank you for the quick reply! I see your point. In my case, I have different queries for get and list, and I'm not passing the object itself to the detail component. So the detail component needs to do a get query anyway.

I didn't pay attention to the possible issue with mutateAsync. I switched it to mutate and I'm also updating/invalidating the cache onSuccess.

export function useSaveUser(variables?: GetUserQueryVariables) {
  const id: string = variables?.id || '';
  // these hooks are generated by graphql-codegen with react-query plugin
  const queryClient = useQueryClient();
  const getQuery = useGetUserQuery({ id }, { enabled: !!id });
  const createMutation = useCreateUserMutation({
    onSuccess: (data) => {
      variables && queryClient.setQueryData(useGetUserQuery.getKey(variables), data?.createUser);
    },
  });
  const updateMutation = useUpdateUserMutation({
    onSuccess: (data) => {
      variables && queryClient.setQueryData(useGetUserQuery.getKey(variables), data?.updateUser);
    },
  });
  const deleteMutation = useDeleteUserMutation({
    onSuccess: (data) => {
      variables && queryClient.invalidateQueries(useGetUserQuery.getKey(variables));
    },
  });

  return {
    data: getQuery.data?.getUser,
    save: ({ id, ...input }: User) =>
      id ? updateMutation.mutate({ input: { ...input, id } }) : createMutation.mutate({ input: { ...input } }),
    delete: () => deleteMutation.mutate({ id }),
    isLoading: getQuery.isLoading,
    isLoadingError: getQuery.isError,
    isSaving: id ? updateMutation.isLoading : createMutation.isLoading,
    isSavingError: id ? updateMutation.isError : createMutation.isError,
    isDeleting: deleteMutation.isLoading,
    isDeletingError: deleteMutation.isLoading,
  };
}