Typing a function that accepts api returned by createApi

[ronnaf]

hi!

i'm trying to wrap the api object returned by createApi with a custom function so that i can add more hooks to it. here's what i have so far:

export const withEnhancedEndpoints = <
	A extends BaseQueryFn,
	B extends EndpointDefinitions,
	C extends string,
	D extends string
>(
	service: Api<A, B, C, D>
) => {
	for (const key in service.endpoints) {
		if (!key.startsWith('useLazy')) {
			const newKey = `use${startCase(key)}QueryWithFx`;

			const typedKey = key as keyof typeof service.endpoints;
			const { useQuery } = service.endpoints[typedKey];
			type Args = Parameters<typeof useQuery>;

			service[newKey] = (args: Args[0], options?: Args[1]) => {
				// eslint-disable-next-line react-hooks/rules-of-hooks
				const dispatch = useDispatch();

				const result = service.endpoints[typedKey].useQuery(args, options);

				// eslint-disable-next-line react-hooks/rules-of-hooks
				const didShow = useRef(false);
				// eslint-disable-next-line react-hooks/rules-of-hooks
				useEffect(() => {
					if (result.isError && !didShow.current) {
						didShow.current = true;
						dispatch(snackbar(result.error));
					}
				}, [dispatch, result.error, result.isError]);

				return result;
			};
		}
	}

	return service;
};

and use it like:

export const anotherApi = apiService.injectEndpoints({
	endpoints: (build) => ({
		getSomething: build.query({ ... }),
	}),
	overrideExisting: true,
});

export const { useSomethingQueryWithFx } = withEnhancedEndpoints(anotherApi);

i think the logic is good but the ts typings are not working. i'm currently getting this:

Property 'useQuery' does not exist on type 'ApiEndpointQuery<B[keyof B], B> | ApiEndpointMutation<B[keyof B], B>'.ts(2339)

it would also be nice if it's able to auto-suggest the new hooks in export const { ... } = withEnhancedEndpoints(anotherApi); but i'm not sure how to do that

i'm not an expert on ts, so any ideas or suggestions to resolve this issue would be greatly appreciated. thank you!

[phryneas]

I believe you actually want to write your own RTK Query module:

https://redux-toolkit.js.org/rtk-query/usage/customizing-create-api#creating-your-own-module

That way you also don't need to wrap your apis, you add more functionality to createApi.

[ronnaf]

I had totally missed this. I'll check it out, thank you!

…

On Wed, Jun 5, 2024 at 2:57 AM Lenz Weber-Tronic ***@***.***> wrote: I believe you actually want to write your own RTK Query module: https://redux-toolkit.js.org/rtk-query/usage/customizing-create-api#creating-your-own-module That way you also don't need to wrap your apis, you add more functionality to createApi. — Reply to this email directly, view it on GitHub <#4444 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHXUXZ3HDBJRB53JGCKFOB3ZFYEYXAVCNFSM6AAAAABIZAKOGSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TMNRYGYYDC> . You are receiving this because you authored the thread.Message ID: ***@***.***>