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

Question

I'm using the swr package. I successfully fetch data using useSWR, but when I try to mutate the data - it does not work, and the cached state of swr does not change (as it should).

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.

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

---

I have also tried to change my custom hook useBackend as follows:

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

import BackendService from '@/services/backend';

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

    const mutator: KeyedMutator<D> = useCallback(
        (data, options) => globalMutate(path, data, options),
        [path],
    );

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

export default useBackend;

But it still didn't help (same exact issue)

---

I have also tried to provide revalidate to the mutation:

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

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

Then it worked - the cache did change. But I navigate to other page and then come back - the cache is invalid again.

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:

---

Also, I don't think the behavior of static methods causes that issue because I refactored the BackendService to something like this:

import { preload } from 'swr';

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

const routesWithRefreshToken: IRefreshTokenRoute[] = [
    { method: 'GET', path: '/user/auth' },
    { method: 'GET', path: '/user/auth/refresh-token' },
];

const fetcher = async <R = unknown, D = unknown>(path: string, method: IHttpMethod, data?: D) => {
    const endpointPath = import.meta.env.VITE_BACKEND_URL + path;

    const withRefresh = !!routesWithRefreshToken.find(
        (route) => route.method === method && route.path === path,
    );

    const token = (withRefresh ? localStorage : sessionStorage).getItem('token');

    const res = await fetch(endpointPath, {
        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;
};

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

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

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

const deleter = <R = unknown>(path: string) => {
    return fetcher<R, null>(path, 'DELETE');
};

const preloader = (path: string) => {
    return preload(path, get);
};

const BackendService = {
    fetcher,
    get,
    post,
    patch,
    deleter,
    preloader,
};

export default BackendService;

And it did not help.

Answer 1

Is this an issue with your backend?

SWR expects that the value you give it with mutate is the same as or your best approximation of what it would get if it called GET /user/secrets again.

The revalidate feature is then used to ensure the cached data is the most up to date data provided by your fetcher function (GET /user/secrets).

When you provide revalidate: false as one of the options to mutate it will not grab the most up to date data provided by your fetcher function (GET /user/secrets) and instead assume that you guarantee your provided value is up to date.

When mounting a component with useSWR its default configuration is set to revalidate the data if it is not already in the process of doing so. This is why when you navigated away from and back to the page in question the cached data was updated to the data provided by your fetcher function (GET /user/secrets).

Mutate Scenario:

1. Data X retrieved via GET /user/secrets stored in cache.
2. mutate is triggered.
3. DELETE /user/secrets is called.
4. Empty Array stored in cache.
5. revalidation is triggered.
6. Data Y (possibly the same as Data X) retrieved via GET /user/secrets stored in cache.

Navigate Scenario:

1. Data X retrieved via GET /user/secrets stored in cache.
2. mutate is triggered.
3. DELETE /user/secrets is called.
4. Empty Array stored in cache.
5. User navigates away from page, unmounting SecretManagement.
6. User navigates to page, mounting SecretManagement.
7. revalidation is triggered.
8. Data Y (possibly the same as Data X) retrieved via GET /user/secrets stored in cache.

TLDR:

With how you are attempting to use SWR it can be assumed that after DELETE /user/secrets is called that GET /user/secrets would return an empty array (which it does not seem to be doing).

Answer 2

I have put your code into a sandbox. with a mocked fetch, and it works...

might there be a bug in the backend delete code?

when you call SWR mutate it will put the returned value in the cache AND re-fetch the data, call get("user/secrets") again. see docs.

If you set revalidate: false, SWR won't re-fetch the data, and you will see the optimistically updated value (until the component is remounted - navigate - and the data is re-fetched). This is what makes me think that the backend delete doesn't really delete the secrets.

hope it helps

Answer 3

I resolved that issue by forcing mutation:

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;

Please read the comments to understand more..