Skip to main content

hookifyResource

hookifyResource() Turns any Resource (collection of RestEndpoints) into a collection of hooks that return RestEndpoints.

info

TypeScript >=4.3 is required for generative types to work correctly.

api/ArticleResource.ts
import React from 'react';
import { createResource, hookifyResource, Entity } from '@rest-hooks/rest';
class Article extends Entity {
id = '';
title = '';
content = '';
pk() {
return this.id;
}
}
const AuthContext = React.createContext('');
const ArticleResourceBase = createResource({
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.tsx
import { ArticleResource } from './api/ArticleResource';
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" />);

Members

Assuming you use the unchanged result of createResource(), these will be your methods

useGet()

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

Commonly used with useSuspense(), Controller.invalidate

useGetList()

  • method: 'GET'
  • path: shortenPath(path)
    • Removes the last argument:
      hookifyResource(createResource({ path: '/:first/:second' })).useGetList()
      .path === '/:first';
      hookifyResource(createResource({ path: '/:first' })).useGetList().path ===
      '/';
  • schema: [schema]
// GET //test.com/api/abc?isExtra=xyz
hookifyResource(
createResource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useGetList()({
group: 'abc',
isExtra: 'xyz',
});

Commonly used with useSuspense(), Controller.invalidate

useCreate()

  • method: 'POST'
  • path: shortenPath(path)
    • Removes the last argument:
      hookifyResource(createResource({ path: '/:first/:second' })).useCreate()
      .path === '/:first';
      hookifyResource(createResource({ path: '/:first' })).useCreate().path ===
      '/';
  • schema: schema
// POST //test.com/api/abc
// BODY { "title": "winning" }
hookifyResource(
createResource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useCreate()({ group: 'abc' }, { title: 'winning' });

Commonly used with Controller.fetch

useUpdate()

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

Commonly used with Controller.fetch

usePartialUpdate()

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

Commonly used with Controller.fetch

useDelete()

  • method: 'DELETE'
  • path: path
  • schema: new schema.Delete(schema)
  • process:
    (value, params) {
    return value && Object.keys(value).length ? value : params;
    },
// DELETE //test.com/api/abc/xyz
hookifyResource(
createResource({ urlPrefix: '//test.com', path: '/api/:group/:id' }),
).useDelete()({
group: 'abc',
id: 'xyz',
});

Commonly used with Controller.fetch