T
TanStack•11mo ago
equal-aqua

Issues with Caching and Error Handling in TanStack Svelte Query

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()),
});
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()),
});
2 Replies
equal-aqua
equal-aquaOP•11mo ago
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
{"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");
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
{"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 question: 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!
equal-aqua
equal-aquaOP•10mo ago
i created a github ticket for this https://github.com/TanStack/query/discussions/8238
GitHub
Issues with Caching and Error Handling in Svelte Query · TanStack q...
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 q...

Did you find this page helpful?