Why is my component not rerendering
Hello I have a component in which I call the useDocuments hook:
I use
The hook looks like this:
Now when I do a mutation like this:
I expected that my
const { data: documents, isLoading, isStale } = useDocuments(contracts);
useEffect(() => {
setCurrentDocuments(documents ?? []);
}, [documents]); const { data: documents, isLoading, isStale } = useDocuments(contracts);
useEffect(() => {
setCurrentDocuments(documents ?? []);
}, [documents]);I use
currentDocumentscurrentDocuments for filtering and other stuff. The hook looks like this:
const useDocuments = (contracts?: IContract[]): UseQueryResult<IDocument[], void> => {
return useQuery({
queryKey: ['documents', contracts?.map((contract) => contract.id)],
queryFn: async () => await mapDocuments(contracts),
onSuccess: (data) => data,
onError: (error) => console.error(error)
});
};const useDocuments = (contracts?: IContract[]): UseQueryResult<IDocument[], void> => {
return useQuery({
queryKey: ['documents', contracts?.map((contract) => contract.id)],
queryFn: async () => await mapDocuments(contracts),
onSuccess: (data) => data,
onError: (error) => console.error(error)
});
};Now when I do a mutation like this:
export const documentTimeStampUpdated = async (
queryClient: QueryClient,
response: AxiosResponse<IDocumentResponse[], any> | undefined,
documentIds: string[],
timestampKey: 'viewedAt' | 'displayedAt' | 'downloadedAt'
) => {
const data = (await response)?.data;
const contracts = queryClient.getQueryData<IContract[]>(['contracts']) || [];
if (!data || (data && data.length === 0)) return;
queryClient.setQueryData<IDocument[]>(['documents', contracts.map((c) => c.id)], (oldData) => {
const newData = oldData?.map((oldDocument: IDocument) => {
return {
...oldDocument,
[timestampKey]: documentIds.includes(oldDocument.id)
? data?.find((updatedDocument) => updatedDocument.id === oldDocument.id)?.[timestampKey] ||
oldDocument[timestampKey]
: oldDocument[timestampKey]
};
});
return newData;
});
};export const documentTimeStampUpdated = async (
queryClient: QueryClient,
response: AxiosResponse<IDocumentResponse[], any> | undefined,
documentIds: string[],
timestampKey: 'viewedAt' | 'displayedAt' | 'downloadedAt'
) => {
const data = (await response)?.data;
const contracts = queryClient.getQueryData<IContract[]>(['contracts']) || [];
if (!data || (data && data.length === 0)) return;
queryClient.setQueryData<IDocument[]>(['documents', contracts.map((c) => c.id)], (oldData) => {
const newData = oldData?.map((oldDocument: IDocument) => {
return {
...oldDocument,
[timestampKey]: documentIds.includes(oldDocument.id)
? data?.find((updatedDocument) => updatedDocument.id === oldDocument.id)?.[timestampKey] ||
oldDocument[timestampKey]
: oldDocument[timestampKey]
};
});
return newData;
});
};I expected that my
useDocumentsuseDocuments should automatically update the data with the updated data and trigger a re-render, but somehow the UI does not update?
