global queryClient.invalidateQueries() on error?

typescript

I found this code in a starter template:

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: () => {
                        queryClient.invalidateQueries();
                    },
                },
            });
        },
    }),
});

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: () => {
                        queryClient.invalidateQueries();
                    },
                },
            });
        },
    }),
});

It looks off to me, so I changed it to:

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error, query) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: query.invalidate,
                },
            });
        },
    }),
});

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error, query) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: query.invalidate,
                },
            });
        },
    }),
});

Is this the correct way to handle per-query errors?

My logic:
- The original code invalidates all queries on error, which seems too broad.
- My version uses the

query

query

argument to only invalidate the failed query via

query.invalidate

query.invalidate

.

Is this the right approach for handling errors and retries in TanStack Query? Any best practices here? Thanks.

TanStack•3mo ago•

2 replies

still-lime

global queryClient.invalidateQueries() on error?

typescript

I found this code in a starter template:

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: () => {
                        queryClient.invalidateQueries();
                    },
                },
            });
        },
    }),
});

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: () => {
                        queryClient.invalidateQueries();
                    },
                },
            });
        },
    }),
});

It looks off to me, so I changed it to:

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error, query) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: query.invalidate,
                },
            });
        },
    }),
});

export const queryClient = new QueryClient({
    queryCache: new QueryCache({
        onError: (error, query) => {
            toast.error(`Error: ${error.message}`, {
                action: {
                    label: "retry",
                    onClick: query.invalidate,
                },
            });
        },
    }),
});

Is this the correct way to handle per-query errors?

My logic:
- The original code invalidates all queries on error, which seems too broad.
- My version uses the

query

query

argument to only invalidate the failed query via

query.invalidate

query.invalidate

.

Is this the right approach for handling errors and retries in TanStack Query? Any best practices here? Thanks.

global queryClient.invalidateQueries() on error?

Similar Threads

global queryClient.invalidateQueries() on error?

Similar Threads

Similar Threads

Similar Threads