eastern-cyan

Why is my component not rerendering

Hello I have a component in which I call the useDocuments hook:

  const { data: documents, isLoading, isStale } = useDocuments(contracts);
  useEffect(() => {
    setCurrentDocuments(documents ?? []);
  }, [documents]);

  const { data: documents, isLoading, isStale } = useDocuments(contracts);
  useEffect(() => {
    setCurrentDocuments(documents ?? []);
  }, [documents]);

I use currentDocuments 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 useDocuments should automatically update the data with the updated data and trigger a re-render, but somehow the UI does not update?

2 Replies

eastern-cyanOP•3y ago

I also checked and the query keys are the same

optimistic-gold•3y ago

Your useEffect is straight from a horror movie 💀 Why don’t you use useMutation for mutation? Show how you’re using the mutation

Gaming

Programming

Why is my component not rerendering

Did you find this page helpful?