1 | import { useEffect, useRef, useMemo } from 'react'
|
2 | import type { SerializeQueryArgs } from '@reduxjs/toolkit/query'
|
3 | import type { EndpointDefinition } from '@reduxjs/toolkit/query'
|
4 |
|
5 | export function useStableQueryArgs<T>(
|
6 | queryArgs: T,
|
7 | serialize: SerializeQueryArgs<any>,
|
8 | endpointDefinition: EndpointDefinition<any, any, any, any>,
|
9 | endpointName: string,
|
10 | ) {
|
11 | const incoming = useMemo(
|
12 | () => ({
|
13 | queryArgs,
|
14 | serialized:
|
15 | typeof queryArgs == 'object'
|
16 | ? serialize({ queryArgs, endpointDefinition, endpointName })
|
17 | : queryArgs,
|
18 | }),
|
19 | [queryArgs, serialize, endpointDefinition, endpointName],
|
20 | )
|
21 | const cache = useRef(incoming)
|
22 | useEffect(() => {
|
23 | if (cache.current.serialized !== incoming.serialized) {
|
24 | cache.current = incoming
|
25 | }
|
26 | }, [incoming])
|
27 |
|
28 | return cache.current.serialized === incoming.serialized
|
29 | ? cache.current.queryArgs
|
30 | : queryArgs
|
31 | }
|