Skip to main content

useBoards

Overview​

useBoards is a custom React hook that retrieves a list of boards for a specific user and project. It leverages @tanstack/react-query for managing the query and caching the data. This hook ensures that the board data is fetched and kept up to date based on the current authentication and project session.

Usage​

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

import React from 'react';
import useBoards from '@lunchbox/apps/hooks/board/useBoards';

const BoardsList: React.FC = () => {
  const { data: boards, isLoading, isError } = useBoards();

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading boards</div>;

  return (
    <ul>
      {boards.map((board) => (
        <li key={board.id}>{board.name}</li>
      ))}
    </ul>
  );
};

export default BoardsList;

Parameters​

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

  • auth: Authentication data to get the current user ID.
  • project: Project session data to get the current project ID.

Returns​

The hook returns an object with the following properties, managed by useQuery from @tanstack/react-query:

  • data: The list of boards.
  • isLoading: A boolean indicating if the query is currently being executed.
  • isError: A boolean indicating if there was an error during the query.
  • error: The error object if an error occurred during the query.

Notes​

  • The hook relies on the authentication state to retrieve the current user data and the project session to retrieve the current project data.
  • The QUERY_KEYS.boardsList generates a unique query key for the list of boards based on the user ID and project ID.