Dropbox API お試し

まず Dropbox API を利用するアプリを登録する

https://www.dropbox.com/developers

APIの選択 > アプリ用のフォルダに限定するか、Dropbox 全体にアクセスさせるか > アプリの名前と進む。

権限の設定

ファイルの表示とアップロードを行いたいので、以下を許可

files.content.write
files.content.read

Access Token

Settings タブの Generate access token

この時点で、自分の Dropbox 内の「アプリ」フォルダに作成したアプリ用のファルダができている

create-next-app --template typescript で適当なアプリケーションを作成し、APIを試してみる

ファイル一覧を取得する

api/dropbox/list.ts

import { Dropbox } from 'dropbox';

import type { NextApiRequest, NextApiResponse } from 'next';
import type { files } from 'dropbox';

const dbx = new Dropbox({ accessToken: process.env.DROPBOX_ACCESS_TOKEN });

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<files.ListFolderResult>
) {
  const list = await dbx.filesListFolder({ path: '' });
  console.info(list);
}

Response

result: {
    entries: [],
    cursor: '...',
    has_more: false
  }

フォルダ内は空なので、レスポンスも空。適当なファイルを配置し、再試行。

result: {
    entries: [ [Object] ],
    cursor: '...',
    has_more: false
  }

取れてる

フロント側で表示する

pages/index.tsx

import { Suspense } from 'react';
import useSWR from 'swr';

import { fetcher } from '../lib/fetcher';

import styles from '../styles/Home.module.css';

import type { files } from 'dropbox';

const FileList = () => {
  const { data } = useSWR(
    '/api/dropbox/list',
    fetcher<files.ListFolderResult>,
    {
      suspense: true,
      fallbackData: {
        entries: [],
        cursor: '',
        has_more: false,
      },
    }
  );

  return (
    <ul>
      {data?.entries.map((d) => (
        <li key={d.id}>{d.name}</li>
      ))}
    </ul>
  );
};

export default function Home() {
  return (
    <main className={styles.main}>
      <Suspense fallback={<p>loading ...</p>}>
        <FileList />
      </Suspense>
    </main>
  );
}

フォルダの場合は、 entries に含まれるエンティティの .tag が folder になるので識別できる

{data?.entries.map((d) => (
  <li key={d.id}>
    {d['.tag'] === 'folder' ? (
      <Link href={d.name}>${d.name}</Link>
    ) : (
       d.name
    )}
  </li>
))}