Invalidate Query default not working
Guys, can anyone help me? I created a crud and whenever I edit the record the data loaded through useList is not updated when i used useUpdate and when I use the Edit component the useList works but the detail only updates the data if I edit the record, exit the screen and edit again, I can't find anything to solve this problem.
Any suggestion?
6 Replies
Hi @.cnunes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, it seems like you're facing an issue with data not being updated immediately after using the
useUpdate
hook in refine. This could be due to the fact that useUpdate
does not automatically trigger a refetch of the data used by useList
.
One way to solve this issue is to manually trigger a refetch of the data after the useUpdate
mutation is completed. You can do this by using the useQuery
hook from react-query
to fetch the data and then call the refetch
method after the mutation. Here's an example:
In this example, the useQuery
hook is used to fetch the data, and the refetch
method is called after the useUpdate
mutation is completed. This will manually trigger a refetch of the data and update your list accordingly.
For more information, you can refer to the useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) and useList (https://refine.dev/docs/api-reference/core/hooks/data/useList/) documentation on the refine website.
Please note that this is a general guide and the actual implementation may vary depending on your specific requirements and the structure of your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@713599745578238022> kapa.ai is still learning and improving, please let us know how it did by reacting below
Hey @.cnunes ,
To better understand the problem, can you share your usage of
useUpdate
and `useList``?flat-fuchsia•11mo ago
@Omer Below is the code summary:
Page List
export const DataLoadLayoutList: React.FC<IResourceComponentsProps> = () => {
const { data } = useList<IDataLoadLayout>({
resource: "data-load-layout"
});
....
}
Page Edit
export const EditDataLoadLayout: React.FC<IResourceComponentsProps> = () => {
const { mutate: mutateUpdate } = useUpdate();
const onFinishColumnsDefinition = (values: Partial<DataLayout>) => { const combinedData = { ...dataStep, ...values }; setDataStep(combinedData);
const { fileList, customFile, ...recordWithoutFile } = combinedData; if (fileList) { const formData = new FormData(); formData.append("data", JSON.stringify(recordWithoutFile)); if (customFile) formData.append("file", customFile);
mutateUpdate({ resource: "data-load-layout", id: dataStep.id, values: formData, meta: { headers: { "Content-Type": "multipart/form-data" } } });
navigate("/data-load-layout", { replace: true }); } }; .......... } PSC @Omer Provider export const dataProviderCollection = (apiUrl: string): DataProvider => ({ getApiUrl: () => apiUrl, getList: async ({ resource, pagination, meta }) => { const url =
const onFinishColumnsDefinition = (values: Partial<DataLayout>) => { const combinedData = { ...dataStep, ...values }; setDataStep(combinedData);
const { fileList, customFile, ...recordWithoutFile } = combinedData; if (fileList) { const formData = new FormData(); formData.append("data", JSON.stringify(recordWithoutFile)); if (customFile) formData.append("file", customFile);
mutateUpdate({ resource: "data-load-layout", id: dataStep.id, values: formData, meta: { headers: { "Content-Type": "multipart/form-data" } } });
navigate("/data-load-layout", { replace: true }); } }; .......... } PSC @Omer Provider export const dataProviderCollection = (apiUrl: string): DataProvider => ({ getApiUrl: () => apiUrl, getList: async ({ resource, pagination, meta }) => { const url =
${apiUrl}/${resource}
;
const { data } = await axiosInstance.get(url);
const total = data?.length ? data.length : 0;
return { data, total };
},
create: async ({ resource, variables, meta }) => {
const url = ${apiUrl}/${resource}
;
const headers = meta?.headers ?? {};
const { data } = await axiosInstance.post(url, variables, { headers });
return { data };
},
update: async ({ resource, id, variables, meta }) => {
const url = ${apiUrl}/${resource}/${id}
;
const headers = meta?.headers ?? {};
const { data } = await axiosInstance.put(url, variables, { headers });
return { data };
},
deleteOne: async ({ resource, id }) => {
const url = ${apiUrl}/${resource}/${id}
;
const { data } = await axiosInstance.delete(url);
return { data };
},
getOne: async ({ resource, id }) => {
if (id) {
const url = ${apiUrl}/${resource}/${id}
;
const { data } = await axiosInstance.get(url);
return data;
}
return null;
},
custom: async ({
url,
method,
filters,
sorters,
payload,
query,
headers,
meta
}) => {
const { data } = await axiosInstance[method](url, {
headers
});
return { data };
}
});Can you share a screen recording where you reproduce the issue?
flat-fuchsia•11mo ago
@Omer I discovery that problem occurred when i use the code below after mutation, when i not use the data are updating correctly:
navigate("/data-load-layout", { replace: true });
Any suggestion?
@Omer I resolved, putting navigate code inside de onSuccess:
mutateUpdate(
{
resource: "data-load-layout",
id: dataStep.id,
values: formData,
meta: {
headers: { "Content-Type": "multipart/form-data" }
}
},
{
onSuccess() {
navigate("/data-load-layout", { replace: true });
}
}
);
This is resolved, but in other crud using Edit component, the redirect is automatic and the problem is edit after save give me the previous data, i will continue the investigation