From 2b078a28be42c8f920c2c1894e64e98647a378f5 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Sun, 23 Jan 2022 00:46:21 +0800
Subject: [PATCH] docs: add more examples

---
 packages/client/package.json                  |  1 +
 .../client/src/api-client/demos/demo1.tsx     |  2 +-
 .../client/src/api-client/demos/demo2.tsx     | 23 ++++++++++++++
 packages/client/src/api-client/index.md       | 30 +++++++++++++++----
 yarn.lock                                     | 12 ++++----
 5 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 packages/client/src/api-client/demos/demo2.tsx

diff --git a/packages/client/package.json b/packages/client/package.json
index a04531a1a..596ec8d64 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -29,6 +29,7 @@
     "i18next": "^21.6.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.15.1",
+    "react-image-lightbox": "^5.1.4",
     "use-deep-compare-effect": "^1.8.1"
   },
   "peerDependencies": {
diff --git a/packages/client/src/api-client/demos/demo1.tsx b/packages/client/src/api-client/demos/demo1.tsx
index 09a09cd5f..aab4a16f7 100644
--- a/packages/client/src/api-client/demos/demo1.tsx
+++ b/packages/client/src/api-client/demos/demo1.tsx
@@ -20,5 +20,5 @@ export default compose(...providers)(() => {
     action: 'get',
     params: {},
   });
-  return <div>{data?.name}</div>;
+  return <div>{data?.data?.name}</div>;
 });
diff --git a/packages/client/src/api-client/demos/demo2.tsx b/packages/client/src/api-client/demos/demo2.tsx
new file mode 100644
index 000000000..0b21e1fc1
--- /dev/null
+++ b/packages/client/src/api-client/demos/demo2.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import { APIClient, APIClientProvider, useRequest, compose } from '@nocobase/client';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+  data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [
+  [APIClientProvider, { apiClient }]
+];
+
+export default compose(...providers)(() => {
+  const { data } = useRequest({
+    url: 'users:get',
+    method: 'get',
+  });
+  return <div>{data?.data?.name}</div>;
+});
diff --git a/packages/client/src/api-client/index.md b/packages/client/src/api-client/index.md
index 0a511795f..e8c8d9808 100644
--- a/packages/client/src/api-client/index.md
+++ b/packages/client/src/api-client/index.md
@@ -72,16 +72,34 @@ function useRequest<P>(
 支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
 
 ```ts
-const { data, loading, refresh } = useRequest({ url: '/users' });
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
+run({
+  params: {
+    pageSize: 20,
+  }
+});
 ```
 
+例子如下：
+
+<code src="./demos/demo2.tsx" />
+
 或者是 NocoBase 的 resource & action 请求：
 
 ```ts
-const { data } = useRequest({
+const { data, run } = useRequest({
   resource: 'users',
-  action: 'get',
-  params: {},
+  action: 'list',
+  params: {
+    pageSize: 20,
+  },
+});
+
+// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。
+run({
+  pageSize: 50,
 });
 ```
 
@@ -92,7 +110,9 @@ const { data } = useRequest({
 也可以是自定义的异步函数：
 
 ```ts
-const { data, loading, refresh } = useRequest(() => Promise.resolve({}));
+const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
+
+run(...params);
 ```
 
 更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index)
diff --git a/yarn.lock b/yarn.lock
index 47141fd72..262c8ad45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6272,7 +6272,7 @@ execa@^5.0.0:
 
 exenv@^1.2.0:
   version "1.2.2"
-  resolved "https://registry.npmmirror.com/exenv/download/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
 
 exit@^0.1.2:
@@ -12355,8 +12355,8 @@ react-i18next@^11.15.1:
 
 react-image-lightbox@^5.1.4:
   version "5.1.4"
-  resolved "https://registry.nlark.com/react-image-lightbox/download/react-image-lightbox-5.1.4.tgz#5b847dcb79e9efdf9d7cd5621a92e0f156d2cf30"
-  integrity sha1-W4R9y3np79+dfNViGpLg8VbSzzA=
+  resolved "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz#5b847dcb79e9efdf9d7cd5621a92e0f156d2cf30"
+  integrity sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==
   dependencies:
     prop-types "^15.7.2"
     react-modal "^3.11.1"
@@ -12373,12 +12373,12 @@ react-is@^17.0.1:
 
 react-lifecycles-compat@^3.0.0:
   version "3.0.4"
-  resolved "https://registry.npmmirror.com/react-lifecycles-compat/download/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha1-TxonOv38jzSIqMUWv9p4+HI1I2I=
+  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
 react-modal@^3.11.1:
   version "3.14.4"
-  resolved "https://registry.npmmirror.com/react-modal/download/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3"
+  resolved "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3"
   integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==
   dependencies:
     exenv "^1.2.0"