Zenn
Open5

refineチュートリアル

Next.js
React
Yusuke InaiYusuke Inai

dataProvider

→RefineとAPIをつなぐアダプターのようなもの

APIからデータを取得したい場合、内部的にdataProviderのメソッドに接続されているRefineのデータフックを使用します。
dataProviderのメソッドに必要なパラメータを渡すと、APIからレスポンスが返ってくる。
例）
下記のようにuseListデータフックを利用して、postsリソースからすべてのデータを取得することができる

src/pages/posts/index.tsx
import { useList } from "@refinedev/core";

const postUseListResult = useList({
  resource: "posts",
  sorters: [
    {
      field: "id",
      order: "desc",
    },
  ],
  filters: [
    {
      field: "title",
      operator: "contains",
      value: "hello",
    },
  ],
});

このとき内部的にはuseListフックに渡されたパラメータをデータプロバイダーのgetListメソッドに転送する
（refineはバックグラウンドですべてのデータプロバイダーのメソッドを対応するデータフックに接続している）

dataProvider.ts
const dataProvider = {
    getList: (params) => {
        console.log(params);
        /*
        {
          "resource": "posts",
          "sorters": [
            {
              "field": "id",
              "order": "desc"
            }
          ],
          "filters": [
            {
              "field": "title",
              "operator": "contains",
              "value": "hello"
            }
          ],
        }
        */
    }
    ...
}

Refineの組み込みデータプロバイダーがAPIのニーズを満たさない場合などは既存のデータプロバイダーロジックを編集したい
→そういった場合はswizzleを使用したりゼロから独自のデータプロバイダーを開発する

独自のデータプロバイダーの開発の流れとしてはファイルを作成してそれにメソッドを追加していくイメージ。
例）

  • getList

    • パラメータの種類：
      • resource
      • pagination
      • sorter
      • filter
    • Refineは、useListまたはuseInfiniteListデータフックを使用してgetListメソッドを呼び出す

  • create

    • リソースと 変数のパラメータを持つ新しいレコードを作成する。
    • useCreateで使用する

  • update

  • deleteOne

  • getOne

  • getApiUrl

  • custom

    • 非標準の REST API エンドポイントがある場合や、外部リソースと接続したい場合に便利
    • パラメータの種類：
      • url
      • method
      • sorters
      • filters
      • payload
      • query
      • headers

metaについて

以下の目的で使用される

  • 特定のユースケース用にデータプロバイダーメソッドをカスタマイズする。
  • JSONを使用してGraphQLクエリーを生成する。
Yusuke InaiYusuke Inai

dataProviderの詳細について

https://refine.dev/docs/core/refine-component/#dataprovider

resource

resourceはAPIのエンドポイント（例：https://api.fake-rest.refine.dev/posts）
のエンティティを表します。
APIからのデータとアプリ内のページとの橋渡しの役割を果たし、ページがAPIからのデータとやり取りできるようにします。

  • name
    • API内でリソースを識別する文字列。リソース内のデータとの対話はこのnameによって決定されるエンドポイントを使用して行われる
  • identifier
    • 同じnameで異なるmeta値を持つリソースを区別するために使用される
  • meta
  • リソースに関する追加情報を格納するために使用される
Yusuke InaiYusuke Inai

Resources

ResourceとRoute

→リソース設定内のパス定義は、Refineがその特定のパスでリソースの利用可能なアクションを認識するのに役立ちます。これにより、ユーザがフックやコンポーネントでリソースのプロップを手動で指定しなくても、Refineが現在のパスに基づいてリソースを自動的に識別できるようになる
→この柔軟性のおかげで、Refineはユーザーに制限を課すことなく、既存のReactアプリケーションにシームレスに統合できます。また、ルーティングロジックに干渉することなく、必要なルートにアタッチすることもできます。これにより、ネストされたルートやマルチテナンシーなどの複雑な要件を持つエンタープライズグレードのアプリケーションでRefineを使用することが可能になります。

アクションの定義

削除を除くすべてのアクションは、resourceオブジェクトのプロパティで定義される
→アクションを最も簡単に定義する方法はページのパスを指定すること

pathparamsも定義可能
→id以外の追加パラメータはmetaを利用してコンポーネントまたはhooksに渡すことが可能
またナビゲーションを処理する際には、URL内の既存のパラメータがデフォルトで使用されます。
（例えば/:userId/blog-postsからcreateボタンでcreateすると/:userId/blog-posts/createにリダイレクトされる）

Yusuke InaiYusuke Inai

List/Edit/Show/Delete/SortとFilter

Listコンポーネントを理解する

  • <List />
  • <Table />
  • useTable
  • <EditButton /><ShowButton />

外部キー
例えば各ブログのカテゴリーを取得したい場合
→useManyを利用
このフックを使うと、関連するレコードのidを指定することで、1回のリクエストで複数のレコードのデータを取得できる。この場合、ブログ記事のカテゴリのidを提供する必要があります。複数のレコードの関連データを取得する必要がある場合に特に便利。

Edit

  • <Edit />
  • useForm
    • Mantine useFormフックと@refinedev/core useFormフックを使用して開発されています。
    • 編集ページで使用すると、URLのidでレコードデータを取得し、dataProviderの updateメソッドでフォームに入力し、送信します。また、フォームの送信ボタン用にsaveButtonPropsも提供します。

外部キー
例えば、ブログ記事をカテゴリに割り当てるためにカテゴリリソースからカテゴリを選択する必要がある場合、Refineが提供するuseSelectフックを使用することができます。このフックはdataProviderの getListメソッドにパラメータを渡すことでデータを取得し、<Select/>コンポーネントで使用するために必要なpropsを返します。

Show

外部キー
<Show />には1つのレコードがあり、それは他のリソースとの関係を持っているかもしれない。
→例えば、blog_postsリソースはcategoriesリソースとリレーションを持っています。この場合、Refineが提供するuseOneフックを使用することで、idと リソースのパラメータを使用して単一レコードのデータを取得することができます。

Delete

resourcesのmetaオブジェクトにてcanDeleteプロパティをtrueに設定すると、表示ページと編集ページの両方に削除ボタンが表示されるようになる

SortとFilter

refinedev/react-tableパッケージはTanStack Tableパッケージをベースにしているので、TanStackのドキュメントで提案されているように、テーブルにソートやフィルタリング機能を追加することができる。
→Tanstack Tableは、ソートと フィルタの状態をuseTableフックに保持します。これらの状態が変更されると、useTableフックは自動的にデータを取得し、新しいデータでテーブルを更新します。