/
use-mutation.js
38 lines (27 loc) · 1.19 KB
/
use-mutation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// @flow
// NOTE(ryan): The public flow type interface for this hook is defined in use-mutation.js.flow
import * as React from 'react';
import { useDispatch } from 'react-redux';
import { mutateAsync } from 'redux-query';
import type { ActionPromiseValue, QueryConfig } from 'redux-query/types.js.flow';
import type { QueryState } from '../types';
import useQueryState from './use-query-state';
const useMutation = (
makeQueryConfig: (...args: $ReadOnlyArray<mixed>) => QueryConfig,
): [QueryState, (...args: $ReadOnlyArray<mixed>) => Promise<ActionPromiseValue>] => {
const reduxDispatch = useDispatch();
// This query config and query state are driven based off of the callback – so they represent
// the the query config that was used for the most-recent mutation callback.
const [queryConfig, setQueryConfig] = React.useState(null);
const queryState = useQueryState(queryConfig);
const mutate = React.useCallback(
(...args) => {
const queryConfig = makeQueryConfig(...args);
setQueryConfig(queryConfig);
return reduxDispatch(mutateAsync(queryConfig));
},
[makeQueryConfig, reduxDispatch],
);
return [queryState, mutate];
};
export default useMutation;