Skip to content

@msflib/react-drivelink

Standalone drivelink module built on TanStack Query.

Install

pnpm add @msflib/react-drivelink

Peer deps

  • react >= 18
  • @tanstack/react-query >= 5

Usage

Wrap your app with the module Provider inside your QueryClientProvider.

In Next.js App Router, Provider must be in a client component ("use client").

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { DrivelinkProvider, useDrivelink } from '@msflib/react-drivelink';

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  <DrivelinkProvider
    options={{ requireAuth: true, isAuthenticated: true, listParams: { trash: 'exclude' } }}
  >
    <DriveExplorer />
  </DrivelinkProvider>
</QueryClientProvider>;

function DriveExplorer() {
  const {
    nodes,
    createFolder,
    uploadFile,
    patchNode,
    deleteNode,
    restoreNode,
    searchNodes,
  } = useDrivelink();

  async function upload(parentId: number, file: File) {
    const formData = new FormData();
    formData.append('file', file, file.name);
    await uploadFile(parentId, formData);
  }

  return null;
}

Download flow

Use downloadNode when you want file bytes (Blob), and getNodeDownloadUrl when you want a backend-generated URL.

import { useDrivelink } from '@msflib/react-drivelink';

function DownloadActions({ nodeId }: { nodeId: number }) {
  const { downloadNode, getNodeDownloadUrl } = useDrivelink();

  async function openDownloadUrl() {
    const url = await getNodeDownloadUrl(nodeId, { redirect: false });
    window.open(url, '_blank');
  }

  async function downloadBlob() {
    const result = await downloadNode(nodeId);
    if (!(result instanceof Blob)) return;

    const blobUrl = URL.createObjectURL(result);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = `node-${nodeId}`;
    a.click();
    URL.revokeObjectURL(blobUrl);
  }

  return null;
}

Notes: - downloadNode(nodeId) calls the endpoint in binary mode and returns Blob. - downloadNode(nodeId, { redirect: false }) returns metadata ({ url, expires_in }). - getNodeDownloadUrl(nodeId, { redirect: false }) returns only the url string.

Endpoints

Configure paths through configureApplication({ endpoints: { drivelink } }).

Key Default path Methods / routes
health /drivelink/health GET
nodes /drivelink/nodes list/detail/patch/delete/copy/restore/upload/replace/download
search /drivelink/nodes/search GET
folders /drivelink/nodes/folders POST
trash /drivelink/trash GET
recents /drivelink/recents GET
starred /drivelink/starred GET
batch /drivelink/batch POST

Nodes can represent both folders and files. Use DrivelinkNode.kind to branch UI behavior.