Skip to main content

useUpdateDocument

Overview​

useUpdateDocument is a custom React hook designed to update a document's details. It uses @tanstack/react-query for managing the mutation and caching. The hook ensures consistency across the application state by leveraging the authentication state, project session, and document data.

Usage​

To use useUpdateDocument, ensure your component has access to the necessary hooks (useAuth, useDocuments, useProjectSession).

import React from 'react';
import { useMutation } from '@tanstack/react-query';
import useUpdateDocument from '@lunchbox/apps/hooks/useUpdateDocument'
import { NavbarDoc } from '@lunchbox/apps/types/docs';

const DocumentUpdater: React.FC<{ doc: NavbarDoc }> = ({ doc }) => {
  const updateDocument = useUpdateDocument();

  const handleUpdate = () => {
    updateDocument.mutate(doc);
  };

  return (
    <button onClick={handleUpdate}>Update Document</button>
  );
};

export default DocumentUpdater;

Parameters​

This hook does not take any parameters directly. It uses the following:

  • payload: A NavbarDoc object representing the document to be updated.

Returns​

The hook returns a mutation object with the following properties, managed by useMutation from @tanstack/react-query:

  • mutate: A function to trigger the mutation.
  • isLoading: A boolean indicating if the mutation is currently being executed.
  • isError: A boolean indicating if there was an error during the mutation.
  • error: The error object if an error occurred during the mutation.
  • isSuccess: A boolean indicating if the mutation was successful.

Notes​

  • The hook relies on the authentication state to retrieve the authenticated user data and project session to retrieve the current project data.
  • The DOCUMENT_MAPPER should map document types to their respective classes, which implement the update method.
  • Upon successful mutation, the hook updates the local cache using produce from immer and invalidates the queries to ensure the UI reflects the updated state.