redux toolkit - custom selector on rtk-query - typescript

[mkdudeja]

The latest version of the redux toolkit package throws typescript while creating the custom selector based on rtk-query state information.

Expected: Should get compiled successfully.

Actual: Typescript error.

it can be replicated in the redux-toolkit's typescript version scaffold.

Steps to replicate typescript scaffold):

1. create file named api.ts in app folder as app/api.ts as below:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { RootState } from "./store";


// initialize an empty api service that we'll inject endpoints into later as needed
const apiBase = createApi({
  refetchOnFocus: false, // Re-fetching on window focus
  refetchOnReconnect: false, // Re-fetching on network reconnection
  keepUnusedDataFor: 60,
  refetchOnMountOrArgChange: false, // Encouraging re-fetching
  baseQuery: fetchBaseQuery({
    baseUrl: "http://example.com",
  }),
  endpoints: (builder) => ({
    currencies: builder.query<{ [k: string]: number }, void>({
      query: () => ({
        url: "currencies",
        method: "GET",
      }),
    }),
  }),
});

export default apiBase;

const selectCurrenciesEndpoint = (state: RootState) =>
  apiBase.endpoints.currencies.select()(state);

2. Update store.ts as below:

export const store = configureStore({
  reducer: {
    api: apiBase.reducer,
    counter: counterReducer,
  },
});

You'll start seeing the error message as defined above at the line apiBase.endpoints.currencies.select()(state);.

Looking forward to your response.

PS. in middle of upgrading my project and looking for the solution :-)

Thanks,
Manish

[markerikson]

Yep, duplicate of #1879 .

I will try to take a look at it this weekend, but I can't guarantee anything.

[mkdudeja]

Sure, Many Thanks

[MaxBeliaiev]

Was it fixed? Facing the same problem on 1.9 RTK