hookifyResource

hookifyResource() 可以把任意 Resource（RestEndpoints 的集合）转换为一组返回 RestEndpoints 的 hook。

信息

生成式类型要正常工作，需要 TypeScript >=4.3。

▶resources/Article

import React from 'react';
import { Collection, Entity, Invalidate, hookifyResource, resource } from '@data-client/rest';

class Article extends Entity {
  id = '';
  title = '';
  content = '';
}
const AuthContext = React.createContext('');

const ArticleResourceBase = resource({
  urlPrefix: 'http://test.com',
  path: '/article/:id',
  schema: Article,
});
export const ArticleResource = hookifyResource(
  ArticleResourceBase,
  function useInit() {
    const accessToken = React.useContext(AuthContext);
    return {
      headers: {
        'Access-Token': accessToken,
      },
    };
  },
);

▶ArticleDetail

import { useSuspense, useController } from '@data-client/react';
import { ArticleResource } from './resources/Article';
import ArticleForm from './ArticleForm';

function ArticleDetail({ id }) {
  const article = useSuspense(ArticleResource.useGet(), { id });
  const updateArticle = ArticleResource.useUpdate();
  const ctrl = useController();
  const onSubmit = (body: any) => ctrl.fetch(updateArticle, { id }, body);

  return <ArticleForm onSubmit={onSubmit} initialValues={article} />;
}
render(<ArticleDetail id="1" />);

成员

假设你使用的是 resource() 未经修改的结果，那么你会得到以下方法

useGet()

• method: 'GET'
• path: path
• schema: schema

// GET //test.com/api/abc/xyz
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useGet()({
  group: 'abc',
  id: 'xyz',
});

常与 useSuspense()、Controller.invalidate 一起使用

useGetList()

• method: 'GET'
• path: shortenPath(path)
  • 移除最后一个 :param 或 *wildcard 标记：

    hookifyResource(resource({ path: '/:first/:second' })).useGetList()
      .path === '/:first';
    hookifyResource(resource({ path: '/:first' })).useGetList().path ===
      '/';
    hookifyResource(resource({ path: '/:owner/*path' })).useGetList()
      .path === '/:owner';

• schema: [schema]

// GET //test.com/api/abc?isExtra=xyz
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useGetList()({
  group: 'abc',
  isExtra: 'xyz',
});

常与 useSuspense()、Controller.invalidate 一起使用

useGetList().push

push 会创建一个新的 Entity，并把它推入 useGetList() 的末尾。

• method: 'POST'
• path: shortenPath(path)
• schema: useGetList().schema.push

// POST //test.com/api/abc
// BODY { "title": "winning" }
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useGetList().push({ group: 'abc' }, { title: 'winning' });

常与 Controller.fetch 一起使用

useGetList().unshift

unshift 会创建一个新的 Entity，并把它推入 useGetList() 的开头。

• method: 'POST'
• path: shortenPath(path)
• schema: useGetList().schema.unshift

// POST //test.com/api/abc
// BODY { "title": "winning" }
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useGetList().unshift({ group: 'abc' }, { title: 'winning' });

常与 Controller.fetch 一起使用

useGetList().getPage

getPage 会获取另一页，并追加到 useGetList() 中，同时确保没有重复项。

• method: 'GET'
• args: shortenPath(path) & { [paginationField]: string | number } & searchParams
• schema: new Collection([schema]).addWith(paginatedMerge, paginatedFilter(removeCursor))

// GET //test.com/api/abc?isExtra=xyz&page=2
hookifyResource(
  resource({
    urlPrefix: '//test.com',
    path: '/api/:group/:id',
    paginationField: 'page',
  }),
).useGetList().getPage({
  group: 'abc',
  isExtra: 'xyz',
  page: '2',
});

常与 Controller.fetch 一起使用

useUpdate()

• method: 'PUT'
• path: path
• schema: schema

// PUT //test.com/api/abc/xyz
// BODY { "title": "winning" }
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useUpdate()({ group: 'abc', id: 'xyz' }, { title: 'winning' });

常与 Controller.fetch 一起使用

usePartialUpdate()

• method: 'PATCH'
• path: path
• schema: schema

// PATCH //test.com/api/abc/xyz
// BODY { "title": "winning" }
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).usePartialUpdate()({ group: 'abc', id: 'xyz' }, { title: 'winning' });

常与 Controller.fetch 一起使用

useDelete()

• method: 'DELETE'
• path: path
• schema: new Invalidate(schema)
• process:

  (value, params) {
    return value && Object.keys(value).length ? value : params;
  },

// DELETE //test.com/api/abc/xyz
hookifyResource(
  resource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useDelete()({
  group: 'abc',
  id: 'xyz',
});

常与 Controller.fetch 一起使用