xenial-black

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

stormy-gold•3w 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

xenial-blackOP•3w 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

stormy-gold•3w 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

xenial-blackOP•3w 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

stormy-gold•3w 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

xenial-blackOP•3w ago

We only work with the first, but the ids were very similar so somehow I managed to still oversee that tiny difference

Gaming

Programming

Invalidating queryKey with variable doesn't work

Did you find this page helpful?