T
TanStack•4mo ago
eastern-cyan

Invalidating queryKey with variable doesn't work

Hi guys, I'm encountering issues when trying to invalidate queries with a variable in the query key during the onSettled of a useMutation. Basically trying something like this (with version 5.84.1): 
export function usePatchSomething(): UseMutationResult<Something, ErrorType, Something> {
    const queryClient = useQueryClient();

    return useMutation<Something, ErrorType, Something>({
        mutationFn: async (data: Something) => mutateSomething.update.fn(data),
        onSettled: async (_, __, variables) => {
            const { id } = variables;
            void queryClient.invalidateQueries({ queryKey: [SOMETHING, id] });
        },
    });
}
export function usePatchSomething(): UseMutationResult<Something, ErrorType, Something> {
    const queryClient = useQueryClient();

    return useMutation<Something, ErrorType, Something>({
        mutationFn: async (data: Something) => mutateSomething.update.fn(data),
        onSettled: async (_, __, variables) => {
            const { id } = variables;
            void queryClient.invalidateQueries({ queryKey: [SOMETHING, id] });
        },
    });
}
Something has a prop id, when logging the variables in onSettled I do get a result. When I hardcode the id into the key directly, it works fine, but not when using the variable. Is this a bug or is that simply not possible? Is there some other way I can achieve the same effect?
6 Replies
like-gold
like-gold•4mo ago
Hard to say without more code, but make sure you are not using different types, make sure you pass id always as number or as string
eastern-cyan
eastern-cyanOP•4mo ago
Thanks for replying, we use UUIDs so the id is always a string. Here's a bit more code if that helps: 
const Component: FC<{something: Something}> = ({ something }) => {
    const patchQuery = usePatchSomething();
    const patch = async (propA: number | null, propB: string | null): Promise<void> => {
        await patchQuery.mutateAsync({
            ...something,
            propA,
            propB,
        });
    };
    return <Button onClick={() => openDialog({ patch, someVariable })>Button</Button>
}

// Within the dialog I basically call the patch function on submit
const Component: FC<{something: Something}> = ({ something }) => {
    const patchQuery = usePatchSomething();
    const patch = async (propA: number | null, propB: string | null): Promise<void> => {
        await patchQuery.mutateAsync({
            ...something,
            propA,
            propB,
        });
    };
    return <Button onClick={() => openDialog({ patch, someVariable })>Button</Button>
}

// Within the dialog I basically call the patch function on submit
like-gold
like-gold•4mo ago
it should've worked fine, maybe the UUID you pass as a variable is different somehow? like, it's made into lowercase or uppercase or it gets it's lines stripped
eastern-cyan
eastern-cyanOP•4mo ago
When logging the variables.id it's the correct one 🥲 It's very weird Hmmmm actually it does seem that there is a mismatch. Will look further into this. Thanks for thinking with me! Yep, got it fixed :blbsmilesweat2: yey for long UUIDs, hard to spot differences sometimes haha
like-gold
like-gold•4mo ago
long UUIDs? you mean, uuid with -? I know it's common to work with UUIDs in these formats: 
b3ef920d-82d2-4c2f-99bd-4b1bb22b308b
B3EF920D-82D2-4C2F-99BD-4B1BB22B308B
b3ef920d82d24c2f99bd4b1bb22b308b
B3EF920D82D24C2F99BD4B1BB22B308B
b3ef920d-82d2-4c2f-99bd-4b1bb22b308b
B3EF920D-82D2-4C2F-99BD-4B1BB22B308B
b3ef920d82d24c2f99bd4b1bb22b308b
B3EF920D82D24C2F99BD4B1BB22B308B
Hence why'd you want to normalize them if you have inconsistent ones
eastern-cyan
eastern-cyanOP•4mo ago
We only work with the first, but the ids were very similar so somehow I managed to still oversee that tiny difference

Did you find this page helpful?