SWR mutation does not update the cache using a static method of class as a fetcher

[tal-rofe]

Bug report

Description / Observed Behavior

I am using bounded mutation function. When I call the mutate from useSWR, it won't update the cache. I validated it using SWR DevTools - when I called the mutate function - the cache did not update.

I have a class with static methods. One of them is the so-called "fetcher" function.
This is the function I pass to useSWR hook.
When I use mutate from useSWRConfig, it works as expected.

Expected Behavior

I expect to see immediate cache update once I call the bounded mutate function.

Repro Steps / Code Example

I created my custom hook:

import useSWR from 'swr';

import BackendService from '@/services/backend';

const useBackend = <D, E = unknown>(path: string | null) => {
	const { data, error, isLoading, mutate } = useSWR<D, E>(path, BackendService.get);

	return { data, error, isLoading, mutate };
};

export default useBackend;

And this is my BackendService:

import { preload } from 'swr';

import type { IHttpMethod } from '@/interfaces/http';

class BackendService {
	private static routesWithRefreshToken: string[] = ['/user/auth'];

	private static fetcher = async <R = unknown, D = unknown>(
		path: string,
		method: IHttpMethod,
		data?: D,
	) => {
		const requestPath = import.meta.env.VITE_BACKEND_URL + path;
		const withRefresh = this.routesWithRefreshToken.includes(path);
		const token = withRefresh ? localStorage.getItem('token') : sessionStorage.getItem('token');

		const res = await fetch(requestPath, {
			method,
			headers: {
				'Authorization': `Bearer ${token}`,
				'Content-Type': 'application/json',
			},
			body: data ? JSON.stringify(data) : undefined,
		});

		if (!res.ok) {
			throw new Error();
		}

		const resData = await res.json().catch(() => undefined);

		return resData as R;
	};

	public static get = <R = unknown>(path: string) => {
		return this.fetcher<R, null>(path, 'GET');
	};

	public static post = <R = unknown, D = unknown>(path: string, data?: D) => {
		return this.fetcher<R, D>(path, 'POST', data);
	};

	public static patch = <R = unknown, D = unknown>(path: string, data?: D) => {
		return this.fetcher<R, D>(path, 'PATCH', data);
	};

	public static delete = <R = unknown>(path: string) => {
		return this.fetcher<R, null>(path, 'DELETE');
	};

	public static preload = (path: string) => {
		return preload(path, this.get);
	};
}

export default BackendService;

Now, I have the following code:

import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import type { IGetAllSecretsResponseData } from '@exlint.io/common';

import useBackend from '@/hooks/use-backend';
import BackendService from '@/services/backend';

import SecretManagementView from './SecretManagement.view';

interface IProps {}

const SecretManagement: React.FC<IProps> = () => {
	const navigate = useNavigate();

	const { data: getAllSecretsResponseData, mutate: getAllSecretsMutate } =
		useBackend<IGetAllSecretsResponseData>('/user/secrets');

	const hasSecrets = useMemo(() => {
		if (!getAllSecretsResponseData) {
			return false;
		}

		return getAllSecretsResponseData.secrets.length > 0;
	}, [getAllSecretsResponseData]);

	const onRevokeAllSecrets = async () => {
		await getAllSecretsMutate(
			async () => {
				await BackendService.delete('/user/secrets');

				return {
					secrets: [],
				};
			},
			{
				optimisticData: { secrets: [] },
				rollbackOnError: true,
			},
		);

		navigate('', { replace: true });
	};

	return <SecretManagementView hasSecrets={hasSecrets} onRevokeAllSecrets={onRevokeAllSecrets} />;
};

SecretManagement.displayName = 'SecretManagement';
SecretManagement.defaultProps = {};

export default React.memo(SecretManagement);

So when the onRevokeAllSecrets is executed - the cached state does not change.

But if I use mutate of useSWRConfig it works:

import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import type { IGetAllSecretsResponseData } from '@exlint.io/common';
import { useSWRConfig } from 'swr';

import useBackend from '@/hooks/use-backend';
import BackendService from '@/services/backend';

import SecretManagementView from './SecretManagement.view';

interface IProps {}

const SecretManagement: React.FC<IProps> = () => {
	const navigate = useNavigate();

	const { mutate } = useSWRConfig();

	const { data: getAllSecretsResponseData, mutate: getAllSecretsMutate } =
		useBackend<IGetAllSecretsResponseData>('/user/secrets');

	const hasSecrets = useMemo(() => {
		if (!getAllSecretsResponseData) {
			return false;
		}

		return getAllSecretsResponseData.secrets.length > 0;
	}, [getAllSecretsResponseData]);

	const onRevokeAllSecrets = async () => {
		await getAllSecretsMutate(
			async () => {
				await BackendService.delete('/user/secrets');

				return {
					secrets: [],
				};
			},
			{
				optimisticData: { secrets: [] },
				rollbackOnError: true,
			},
		);

		mutate('/user/secrets', { secrets: [] });

		navigate('', { replace: true });
	};

	return <SecretManagementView hasSecrets={hasSecrets} onRevokeAllSecrets={onRevokeAllSecrets} />;
};

SecretManagement.displayName = 'SecretManagement';
SecretManagement.defaultProps = {};

export default React.memo(SecretManagement);

Could anyone tell why? I checked and my BackendService.delete call completes successfully.

SWR version: 2.0.3

[koba04]

Could you reproduce this as a CodeSandbox project?

[tal-rofe]

Tried to but I'm not sure yet how to manage it.
In the mean time I can update that if I add revalidate: false to that mutation, instead of doing this:

		await getAllSecretsMutate(
			async () => {
				await BackendService.delete('/user/secrets');

				return { secrets: [] };
			},
			{
				optimisticData: { secrets: [] },
				rollbackOnError: true,
			},
		);

and doing this:

		await getAllSecretsMutate(
			async () => {
				await BackendService.delete('/user/secrets');

				return { secrets: [] };
			},
			{
				optimisticData: { secrets: [] },
				rollbackOnError: true,
				revalidate: false,
			},
		);

The cache updates successfully to an empty array, BUT when I navigate away and coming back fast to same page, the cache is invalid (non-empty array... but should be empty).

Anyway, if adding revalidate: false somehow does update the cache, then I'd say that when I used revalidate: true (default) the revalidation once the asynchronous update resolves brings non-empty data from my server? But that's it - I checked the response from the server and it responded with empty array.

[tal-rofe]

@koba04

I managed to "bypass" this "issue" by refactor my code to:

import useSWR, { type KeyedMutator } from 'swr';
import { useCallback } from 'react';

import BackendService from '@/services/backend';

const useBackend = <D, E = unknown>(path: string | null) => {
	const { data, error, isLoading, mutate } = useSWR<D, E>(path, BackendService.get);

	/**
	 * * Forced mutation is required for synchronization issues,
	 * * as noted here: https://stackoverflow.com/a/75796537/9105207
	 * * The second mutation call uses cache therefore not extra API call network is made
	 */
	const forcedMutation: KeyedMutator<D> = useCallback(
		async (mutationData, options) => {
			const data = await mutate(mutationData, options);

			await mutate();

			return data;
		},
		[mutate],
	);

	return { data, error, isLoading, mutate: forcedMutation };
};

export default useBackend;