Invalidate Query does not display the newly mutated data.
I have an editable table that uses useQuery to filter data and pagination. The problem I'm having is every time I do mutation it doesnt automatically display the newly updated data. I need to refresh or go to the next page and then go back just to see the changes.
My useQuery:
const { data, isLoading, isFetching } = useQuery({
queryKey: [
"models",
queryVars.query,
queryVars.offset,
queryVars.include,
queryVars.pageSize,
queryVars.sortField,
queryVars.sortOrder,
],
queryFn: async () =>
await client.request<{ models: ModelListType }>(queryModels, {
query,
offset,
include: "inactive",
pageSize: row,
sortField,
sortOrder: sortType,
}),
placeholderData: keepPreviousData,
refetchOnWindowFocus: false,
staleTime: 5000,
});
My mutation:
const modelMutation = useMutation({
mutationFn: async (args: {
id: string;
privacy: "public" | "private" | string;
}) =>
await client.request<any>(updateModelPrivacy, {
modelId: args.id,
visibility: args.privacy,
}),
onError: () => {
console.error("Error in updating privacy.");
},
onSettled: async (data) => {
if (!!data?.errors) {
toast.error(data?.errors[0]?.message);
}
},
onSuccess: async () => {
await queryClient.invalidateQueries({
queryKey: [
"models",
query.query,
query.offset,
query.include,
query.pageSize,
query.sortField,
query.sortOder,
],
exact: true,
refetchType: "all",
stale: true,
});
toast.success("Privacy updated successfully.");
},
});
Can someone tell me what I'm doing wrong? or if I'm missing something in my code.
My useQuery:
const { data, isLoading, isFetching } = useQuery({
queryKey: [
"models",
queryVars.query,
queryVars.offset,
queryVars.include,
queryVars.pageSize,
queryVars.sortField,
queryVars.sortOrder,
],
queryFn: async () =>
await client.request<{ models: ModelListType }>(queryModels, {
query,
offset,
include: "inactive",
pageSize: row,
sortField,
sortOrder: sortType,
}),
placeholderData: keepPreviousData,
refetchOnWindowFocus: false,
staleTime: 5000,
});
My mutation:
const modelMutation = useMutation({
mutationFn: async (args: {
id: string;
privacy: "public" | "private" | string;
}) =>
await client.request<any>(updateModelPrivacy, {
modelId: args.id,
visibility: args.privacy,
}),
onError: () => {
console.error("Error in updating privacy.");
},
onSettled: async (data) => {
if (!!data?.errors) {
toast.error(data?.errors[0]?.message);
}
},
onSuccess: async () => {
await queryClient.invalidateQueries({
queryKey: [
"models",
query.query,
query.offset,
query.include,
query.pageSize,
query.sortField,
query.sortOder,
],
exact: true,
refetchType: "all",
stale: true,
});
toast.success("Privacy updated successfully.");
},
});
Can someone tell me what I'm doing wrong? or if I'm missing something in my code.
