Skip to content

Commit

Permalink
feat(useQueries): v4 api to take an object as input (#3071)
Browse files Browse the repository at this point in the history
* feat(useQueries): update API to use object syntax

New v4 API - instead of taking an array of queries, `useQueries` now accepts an object with a `queries` key. The value of this key is an array of queries (this array is unchanged from v3).

* test(useQueries): update tests for new API

* docs(useQueries): update docs for v4 API
  • Loading branch information
babycourageous authored Dec 10, 2021
1 parent 1247d7b commit 942805f
Show file tree
Hide file tree
Showing 5 changed files with 434 additions and 384 deletions.
10 changes: 10 additions & 0 deletions docs/src/pages/guides/migrating-to-react-query-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,16 @@ new QueryClient({
})
```

### new API for `useQueries`

The `useQueries` hook now accepts an object with a `queries` prop as its input. The value of the `queries` prop is an array of queries (this array is identical to what was passed into `useQueries` in v3).

```diff
- useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }])
+ useQueries({ queries: [{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }] })
```


### Removed undocumented methods from the `queryClient`

The methods `cancelMutatations` and `executeMutation` were undocumented and unused internally, so we removed them. Since they were just wrappers around methods available on the `mutationCache`, you can still use the functionality.
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/guides/parallel-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ function App () {

If the number of queries you need to execute is changing from render to render, you cannot use manual querying since that would violate the rules of hooks. Instead, React Query provides a `useQueries` hook, which you can use to dynamically execute as many queries in parallel as you'd like.

`useQueries` accepts an **array of query options objects** and returns an **array of query results**:
`useQueries` accepts an **options object** with a **queries key** whose value is an **array of query objects**. It returns an **array of query results**:

```js
function App({ users }) {
const userQueries = useQueries(
users.map(user => {
const userQueries = useQueries({
queries: users.map(user => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
})
)
})
}
```
12 changes: 7 additions & 5 deletions docs/src/pages/reference/useQueries.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@ title: useQueries
The `useQueries` hook can be used to fetch a variable number of queries:

```js
const results = useQueries([
{ queryKey: ['post', 1], queryFn: fetchPost },
{ queryKey: ['post', 2], queryFn: fetchPost },
])
const results = useQueries({
queries: [
{ queryKey: ['post', 1], queryFn: fetchPost },
{ queryKey: ['post', 2], queryFn: fetchPost }
]
})
```

**Options**

The `useQueries` hook accepts an array with query option objects identical to the [`useQuery` hook](/reference/useQuery).
The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`useQuery` hook](/reference/useQuery).

**Returns**

Expand Down
Loading

0 comments on commit 942805f

Please sign in to comment.