Recommendations / Ideas to have a custom useMutation hook

[ccreusat]

Hi!

I have the below custom hook that returns useMutation.

FYI: searchParams comes from zustand store, because we have a lot of state management outside data scope

export const useUpdateResource = () => {
  const toast = useToast();
  const queryClient = useQueryClient();
  const searchParams = useSearchParams();
  const { filters, trashed } = searchParams;

  const queryKey = [
    "context",
    {
      folderId: filters.folder,
      filters,
      trashed,
    },
  ];

  return useMutation({
    mutationFn: async (params: UpdateParameters) =>
      await updateResource({ searchParams, params }),
    onError(error) {
      if (typeof error === "string") toast.error(t(error));
    },
    onSuccess: async (_data, variables) => {
      await queryClient.cancelQueries({ queryKey });
      const previousData = queryClient.getQueryData<ISearchResults>(queryKey);
      if (previousData) {
        return queryClient.setQueryData<
          InfiniteData<ISearchResults> | undefined
        >(queryKey, (prev) => {
          if (prev) {
            return {
              ...prev,
              pages: prev?.pages.map((page) => {
                return {
                  ...page,
                  resources: page.resources.map((resource: IResource) => {
                    if (resource.assetId === variables?.entId) {
                      const {
                        name,
                        thumbnail,
                        public: pub,
                        description,
                        slug,
                        ...others
                      } = variables;
                      return {
                        ...resource,
                        ...others, // add any custom field
                        name,
                        thumbnail:
                          typeof thumbnail === "string" || !thumbnail
                            ? thumbnail
                            : URL.createObjectURL(
                                thumbnail as Blob | MediaSource,
                              ),
                        public: pub,
                        description,
                        slug,
                      };
                    } else {
                      return resource;
                    }
                  }),
                };
              }),
            };
          }
          return undefined;
        });
      }
    },
  });
};

This hook is passed as props to an external modal that performs some async calls

<ShareModal
    isOpen={isShareResourceOpen}
    updateResource={updateResource}
    ...
  />

I typed updateResource like this :

 updateResource: UseMutationResult<
    UpdateResult,
    unknown,
    UpdateParameters,
    unknown
  >

and it is used like this :

await shareResource.mutateAsync({
    resourceId: resource.assetId,
    rights: shares,
});

I have some questions :

1. We manage this app with OpenSearch so we have a delay and no response from the backend. That's why I do Optimistic UI. Is it best to use onMutate or onSuccess in this case ?

2. I would like to know if there are any recommendations or pattern to rewrite the hook with optional callbacks (onError, onSuccess, ...) ? Because I will need to export it in your ui library and some apps will use it without need to make Optimistic UI

3. It is best to have the hook directly in the modal but how to get back information to make Optimistic UI ? (I also considered not using React Query, but simple async calls and then I was looking at useMutationState but a lot of refacto would be happening... and I would have to manage data with queryClient directly)

4. It there any interest in using mutate / mutateAsync options ? I did not really catch the benefit in using them :

mutate(variables, {
  onError,
  onSettled,
  onSuccess,
})

That's it! Any idea, any help is welcome :)