@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.