'React Redux RTX Query BaseQueryFn

I've built a React app that uses AWS Amplify API to make calls to my backend. So far I've done this using the classic Redux way of using a store in combination with Thunks.

Now I'm trying to use RTX Query so that I can get all that caching goodness. Based on the docs its my understanding that I should be able to wrap the AWS Amplify API using a BaseQueryFN but I've been unable to get this working. Code is as follows:

export declare  type RequestMethod = "DELETE" | "GET" | "POST" | "PUT";

export declare type RequestOptions = {
    method: RequestMethod;
    path: string;
    body?: any;
    queryParameters?: any;
};

const amplifyBaseQuery = (): BaseQueryFn<RequestOptions> =>
    async (requestOptions) => {
        switch (requestOptions.method) {
            case "GET":
                return await API.get(CONSTANTS.API_GATEWAY, requestOptions.path, {});
            case "POST":
                return await API.post(CONSTANTS.API_GATEWAY, requestOptions.path, {
                    body: requestOptions.body
                });
            case "PUT":
                return await API.put(CONSTANTS.API_GATEWAY, requestOptions.path, {
                    body: requestOptions.body
                });
            case "DELETE":
                return await API.del(CONSTANTS.API_GATEWAY, requestOptions.path, {
                    queryStringParameters: requestOptions.queryParameters,
                })
        }
    };

export const api = createApi({
    reducerPath: 'api',
    baseQuery: amplifyBaseQuery(),
    endpoints: (builder) => ({
        getListings: builder.query<GetListingsResponse, RequestOptions>({
            query: () => ({
                method: 'GET',
                path: '/listing/listings'
            }),
        })
    })
});

export const {useGetListingsQuery} = api;

I'm getting an error on the export at the bottom:

Property 'useGetListingsQuery' does not exist on type 'Api<BaseQueryFn<RequestOptions, unknown, unknown, {}, {}>, { getListings: QueryDefinition<RequestOptions, BaseQueryFn<RequestOptions, unknown, unknown, {}, {}>, never, GetListingsResponse, "api">; }, "api", never, unique symbol>'.

It seems like I'm messing up the signature but I can't figure out what it should be. I've only been able to find one similar example on how to use BaseQueryFN.

Furthermore, it is also unclear to me where body deserialization is supposed to happen. In this example the body for GET request will return a GetListingsResponse. I specified that in by builder code based on some other examples I found but I think that is also wrong and perhaps it's root cause of my error.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source