Using mutate with optimisticData: typescript is giving me a hard time

[svenlombaert]

Hi there,

Was just upgrading from 1.x to 2.x. I love the Optimistic UI approach, it's removing a lot of our boilerplate. I have one issue though, related to typescript.

I'm using swr like this:

const useRequest = <Data = any, Error = unknown>(
  request: GetRequest | null,
  {
    fallbackData,
    revalidateOnEvent = null,
    shouldFetch = true,
    ...config
  }: Config<Data, Error> = {},
): Return<Data, Error> => {
  const {
    data: response,
    error,
    isValidating,
    mutate,
  } = useSWR<AxiosResponse<Data>, AxiosError<Error>>(
    shouldFetch ? request && JSON.stringify(request) : null,
    () => {
      const axiosConfig = api.getAxiosConfig() as unknown as AxiosRequestConfig;

      return api.axios({
        ...axiosConfig,
        ...request,
        headers: {
          ...axiosConfig.headers,
          ...request?.headers,
        },
      });
    },
    {
      revalidateOnMount: true,
      ...config,
      fallbackData: fallbackData && {
        status: 200,
        statusText: 'InitialData',
        config: request as AxiosRequestConfig,
        headers: {},
        data: fallbackData,
      },
    },
  );

Basically telling that we receive an AxiosResponse with a generic Data type inside it's data key. That's all good. Because of this, mutate is automatically inferred to this type:

const mutate: (data?: AxiosResponse<NotificationSettingApiResponse, any> | Promise<AxiosResponse<NotificationSettingApiResponse, any>> | MutatorCallback<...> | undefined, opts?: boolean | ... 1 more ... | undefined) => Promise<...>

And I mutate like this:

  const updateNotificationStatus = useCallback(
    async (isEnabled: boolean) => {
      await api.post('/direct-post/notification', {
        coinId: asset.id,
        isEnabled: isEnabled,
      });
    },
    [asset.id],
  );

  const handleEnableNotifications = useCallback(
    async (enabled: boolean) => {
      await mutate(updateNotificationStatus(enabled), {
        optimisticData: (response) => {
          if (!response) {
            return;
          }

          return {
            ...response,
            data: {
              ...response.data,
              notificationSetting: {
                ...response.data?.notificationSetting,
                isEnabled: enabled,
              },
            },
          };
        },
        populateCache: false,
        revalidate: true,
      });
    },
    [mutate, updateNotificationStatus],
  );

Code works perfectly, gets rolled back on error, all good. It's just that typescript is complaining that updateNotificationStatus is returning a Promise<void> whilst it expects Promise<AxiosResponse<NotificationSettingApiResponse, any>>

Anyone has found a way to tell typescript this is fine? Because if you set populateCache: false, it doesn't matter what updateNotificationStatus returns, it's not used anyway.

Hope this was clear 😅

[checklist]

I have a similar issue with the same error. I have posted a SO. Hopefully will be resolved soon as it makes it difficult to use (need to @ts-ignore everywhere).

Thanks!