Issues with Caching and Error Handling in Svelte Query

[kimonneuhoff]

Hi,

I've recently discovered this library and have spent a few hours trying to implement it, but I'm running into some issues regarding caching and error handling.

My Implementation

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            enabled: browser,
        },
    },
    queryCache: new QueryCache({
        onError: (error) => {
            console.log("CACHE ERROR");
            console.log(error);
        },
        onSuccess: (data) => {
            console.log("CACHE SUCCESS");
            console.log(data);
        },
        onSettled: (data, error) => {
            console.log("CACHE SETTLED");
            console.log(data, error);
        },
    }),
});

createQuery({
    queryKey: ["posts"],
    queryFn: async () => await fetch("https://localhost/test").then((r) => r.json()),
});

Issues

Caching Behavior

I don’t understand how to get the caching to work properly. With the default configuration, it seems like the cached data is never used. I expected the cached data to be utilized when, for example, I change the fetch URL to an API that doesn’t exist. However, when the fetch fails, even with an error response, the cached data is not used.

After calling an API that doesn’t exist, the logs are as follows:

{"status":"error","fetchStatus":"idle","isPending":false,"isSuccess":false,"isError":true,"isInitialLoading":false,"isLoading":false,"dataUpdatedAt":0,"error":{},"errorUpdatedAt":1729986571063,"failureCount":4,"failureReason":{},"errorUpdateCount":1,"isFetched":true,"isFetchedAfterMount":true,"isFetching":false,"isRefetching":false,"isLoadingError":true,"isPaused":false,"isPlaceholderData":false,"isRefetchError":false,"isStale":true,"promise":{"status":"rejected","reason":{}}}

Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

POST https://localhost/tes 404 (Not Found)
POST https://localhost/tes 404 (Not Found)
POST https://localhost/tes (Not Found)
CACHE ERROR
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
CACHE SETTLED
undefined SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Shouldn't the cached data be returned in this case? Additionally, when I trigger an error in the API using throw error(400, "Not implemented"); the logs are as follows:

{"status":"success","fetchStatus":"idle","isPending":false,"isSuccess":true,"isError":false,"isInitialLoading":false,"isLoading":false,"data":{"message":"Not implemented"},"dataUpdatedAt":1729986258932,"error":null,"errorUpdatedAt":1729986164278,"failureCount":0,"failureReason":null,"errorUpdateCount":1,"isFetched":true,"isFetchedAfterMount":true,"isFetching":false,"isRefetching":false,"isLoadingError":false,"isPaused":false,"isPlaceholderData":false,"isRefetchError":false,"isStale":true,"promise":{"status":"rejected","reason":{}}}

POST https://localhost/test 400 (Bad Request)
CACHE SUCCESS
{message: 'Not implemented'}
CACHE SETTLED
{message: 'Not implemented'} null

Here, even though I returned a status code of 400, as in the previous case, it is still trying to cache the response and won't return the cached data, but it will also say that the query was successful and didn't fail - which seems incorrect and leads to my second issue:

Handling Query Failures

How can I ensure that a query fails appropriately? When I throw an error in my API or return an error status code, the library still indicates that everything is fine. It’s confusing because I would expect it to retry or use the cache when the API fails, but it doesn't seem to behave this way.

I would appreciate any guidance on how to resolve these issues. Thank you for your help!