diff --git a/docs/docs/fetch-api.md b/docs/docs/fetch-api.md index 65394ea..94cb555 100644 --- a/docs/docs/fetch-api.md +++ b/docs/docs/fetch-api.md @@ -12,6 +12,7 @@ This component accepts the props described below and can override all of the pro | [path](#path) | String | | - | | [customPath](#custompath) | String | | - | | [id](#id) | String | | - | +| [operation](#operation) | 'info' or 'list' | | - | | [query](#query) | Object | | - | | [render](#render) | Func | ✔ | - | | [renderError](#rendererror) | Func | | error =>
{error}\
| @@ -101,6 +102,30 @@ Read more about it on [useCroods hook API](/docs/use-croods-api#stateid). // state = { todos@user: { list: [...], fetchingList: false, ... } } ``` +## operation + +Read more about it on [useCroods hook API](/docs/use-croods-api#operation). + +#### Usage: + +```jsx +// When the result of /api/todos returns an object +
{info.title}
)} +/> + +// Or when the result of /api/todos/1 returns a list + list.map(item =>
)} +/> +``` + + ## query **Object:** This is used when you want to append a queryString to your URL. diff --git a/docs/docs/use-croods-api.md b/docs/docs/use-croods-api.md index 91b567a..83a7f46 100644 --- a/docs/docs/use-croods-api.md +++ b/docs/docs/use-croods-api.md @@ -11,6 +11,7 @@ This [hook](https://reactjs.org/docs/hooks-intro.html) receives a configuration | [path](#path) | String | | - | | [customPath](#custompath) | String | | - | | [stateId](#stateid) | String | | - | +| [operation](#operation) | 'info' or 'list' | | - | | [query](#query) | Object | | - | | [id](#id) | String | | - | | [fetchOnMount](#fetchonmount) | Bool | ✔ | false | @@ -111,6 +112,35 @@ save({ customPath: '/foo/:id/bar/' })() // POST /foo/1/bar ``` + +## operation + +**String:** It can be either `'info'` or `'list'`. This is used to change the default behavior or the `fetch` action so it does not matter if you passed an `id` or not, the parsed result of the response will end up in the given piece of the state. + +When the API is responding differently to what Croods expects - that means responding with an object when `GET List` requests or the opposite - and you want to have that object set in the `info` instead of `list` state, then you should use this prop. It works the other way around, when a `GET Info` will reply with a list that you want set in the `list` state. + +This prop **will actually change the Actions** from `List Request/Success/Failure` to `Info Request/Success/Failure` or from `Info Request/Success/Failure` to `List Request/Success/Failure`. + +#### Usage: + +```jsx +// Normal behavior +const [{ list }] = useCroods({ name: 'todos' }) +const [{ info }] = useCroods({ name: 'colors', id: 1 }) + +// Expected behavior +const [{ info }] = useCroods({ name: 'todos', operation: 'info' }) +const [{ list }] = useCroods({ name: 'colors', id: 1, operation: 'list' }) +``` + +**Important:** It only works on `fetch` operations so it should actually be used with the action like so: +```jsx +const [{ info }, { fetch }] = useCroods({ name: 'todos' }) +React.useEffect(() => { + fetch({ operation: 'info' })() +}, []) +``` + ## query **Object:** This is used on `GET` requests, when you want to send query parameters (parameters on your URL) when fetching is called by Croods (read [`fetchOnMount`](#fetchonmount)).