Cache is not updating after calling queryCache.setQueryData

[numToStr]

After calling useMutation I wanted to add an item in the list via queryCache.setQueryData which is already in the cache, kinda like adding a todo in a todo list.

But for some reason, It is not updating the cache. IDK what I am doing wrong as I am new to react-query and next.js.

// query.ts
export type Punch = {
    time: string;
    type: "IN" | "OUT";
};

type PunchMutationResult = BaseResult<{
    punch: Punch;
}>;

type TodaysQueryResult = BaseResult<{
    punches: Punch[];
}>;

export const usePunchMutation = (type: "in" | "out") => {
    return useMutation(put<PunchMutationResult>(`/attendence/${type}`), {
        onSuccess() {
           // This is not working
            return queryCache.setQueryData<null | TodaysQueryResult>(
                "/attendence/today",
                {
                    data: {
                        punches: [
                            { type: "IN", time: new Date().toISOString() },
                        ],
                    },
                }
            );
        },
    });
};

export const useTodaysQuery = () => {
    return useQuery<TodaysQueryResult>("/attendence/today");
};

const ChildComponent = () => {
    const { data } = useTodaysQuery();

   // This logs only for the first time, when the query gets executed
   // but not after `queryCache.setQueryData()`
    console.log(data);

    return (
        <Fragment>
           ...
        </Fragment>
    );
};

export default ChildComponent;

// index.tsx
const Index = () => {
    return (
        <Fragment>
                ....
                <ChildComponent />
        </Fragment>
    );
};

export async function getServerSideProps(ctx: NextPageContext) {
    const c = makeQueryCache();

    await c.prefetchQuery(path, () => get('/attendence/today'));

    return {
        props: {
            cache: dehydrate(c),
        },
    };
}

export default Index;

export default function MyApp(props: AppProps) {
    const { Component, pageProps } = props;

    return (
        <React.Fragment>
               ....
                <ReactQueryCacheProvider>
                    <Hydrate state={pageProps.cache}>
                        <ReactQueryConfigProvider
                            config={{
                                queries: {
                                    queryFn(key: string) {
                                         return fetch(key).then(r => r.json())
                                    },
                                    staleTime: 10 * 1000,
                                    refetchOnWindowFocus: false,
                                },
                            }}
                        >
                            <ReactQueryDevtools initialIsOpen />
                            <Component {...pageProps} />
                        </ReactQueryConfigProvider>
                    </Hydrate>
                </ReactQueryCacheProvider>
        </React.Fragment>
    );
}

[CocoTheCoder]

Yeah, I'm experiencing the same issue. Is there a workaround to manually cause the latest query data to be cached?

[TkDodo]

Do you have a minimal codesandbox example to show the issue please?