Skip to content

Commit

Permalink
Update Docs to include fetch's operation prop
Browse files Browse the repository at this point in the history
  • Loading branch information
gustavoguichard committed Nov 29, 2021
1 parent a067cf5 commit c8ee6ed
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 0 deletions.
25 changes: 25 additions & 0 deletions docs/docs/fetch-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 => <div style={{ color: 'red' }}>{error}\</div> |
Expand Down Expand Up @@ -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
<Fetch
name="todos"
operation="info"
render={(_, [{ info }]) => <div>{info.title}</div>)}
/>

// Or when the result of /api/todos/1 returns a list
<Fetch
name="todos"
id={1}
operation="list"
render={(_, [{ list }]) => list.map(item => <div />)}
/>
```


## query

**Object:** This is used when you want to append a queryString to your URL.
Expand Down
30 changes: 30 additions & 0 deletions docs/docs/use-croods-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down Expand Up @@ -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)).
Expand Down

0 comments on commit c8ee6ed

Please sign in to comment.