redux-toolkit
redux-toolkit copied to clipboard
Incompatibility with TypeScript after updating from 5.4.5 to 5.5.2
After updating TypeScript from version 5.4.5 to 5.5.2, TypeScript started reporting errors when using createApi or createSelector from @reduxjs/toolkit.
Code to Reproduce:
Here is a minimal example to reproduce the issue with createApi:
import { createApi } from '@reduxjs/toolkit/query/react';
import { BaseQueryFn } from "@reduxjs/toolkit/query";
import { DocumentNode, FetchPolicy } from "@apollo/client";
import { UsersQuery, UsersDocument } from './graphql-types';
// BaseQuery implementation using Apollo Client
interface BaseQueryProps {
query?: {
query: DocumentNode;
variables?: Record<string, any>;
fetchPolicy?: FetchPolicy;
}; // ...
}
export const baseQuery: BaseQueryFn = async (props: BaseQueryProps, api) => {
const { query, mutation, variables, fetchPolicy } = props;
// Load Apollo client from store, error handling etc omitted for relevant code only
const apolloClient = {}; // Replace with actual Apollo Client instance
if (query) {
const result = await apolloClient.query({
query,
variables,
fetchPolicy: fetchPolicy || "network-only"
});
return { data: result.data };
}
if (mutation) {
// analogously ...
} // ...
};
// createApi implementation
export const usersApi = createApi({
reducerPath: 'usersApi',
baseQuery,
endpoints: (builder) => ({
getUsers: builder.query<UsersQuery, void>({
query: () => ({
query: UsersDocument,
}),
}),
}),
});
Expected Behavior:
The code should compile without TypeScript errors as it did with version 5.4.5.
Actual Behavior:
TypeScript reports the following error for createApi:
Argument type {query: () => {query: {query: DocumentNode<UsersQuery, UsersQueryVariables>}}} is not assignable to parameter type OmitFromUnion<QueryDefinition<void, BaseQuery, TagTypes, UsersQuery, ReducerPath>, "type">
TypeScript requests to add unimplemented methods queryFn, type, and extraOptions.
Additionally, an error is reported when using createSelector in createSlice like:
import { createSlice, createSelector } from '@reduxjs/toolkit';
const slice = createSlice({
name: 'slice',
initialState: {},
reducers: {},
selectors: {
someSelector: createSelector(
(state: State1) => state.something,
(state: State1) => state.somethingElse,
(something, somethingElse) => {
// some logic
}
),
},
});
Reported Error:
Argument types do not match parameters export const createSelector: CreateSelectorFunction<(...args: unknown[]) => unknown, <F extends (...args: any[]) => any>(func: F, equalityCheckOrOptions?: (EqualityFn | DefaultMemoizeOptions)) => (F & { clearCache: () => void }), [equalityCheckOrOptions: ((a: any, b: any) => boolean) | DefaultMemoizeOptions | undefined], { clearCache: () => void }>
Environment:
- Redux Toolkit Version: 2.2.6
- React Redux Version: 9.1.2
- TypeScript Version: 5.5.2
- React Version: 18.3.1
- Apollo Client Version: 3.10.8
Additional Context:
My baseQuery implementation takes an Apollo client from the store and uses it to perform GraphQL queries and mutations, because we had to implement our own authentication methods and token handling.
Steps to Reproduce:
- Set up a Redux store with
@reduxjs/toolkit2.2.6. - Define a
baseQueryfunction using Apollo Client. - Use
createApiwith thebaseQueryfunction. - Update TypeScript from 5.4.5 to 5.5.2.
- Observe TypeScript errors.
-export const baseQuery: BaseQueryFn = async (props: BaseQueryProps, api) => {
+export const baseQuery: BaseQueryFn<BaseQueryProps> = async (props, api) => {
does this help?
After further investigation, it was found that the issue was not caused by Redux Toolkit or the TypeScript update to version 5.5.2. Instead, the problem was due to an outdated JetBrains JavaScript and TypeScript plugin (version 241.14494.241).
Steps taken to resolve the issue:
- Type Checking: Added
tsc --noEmitto perform type checking, which went without errors. This indicated that the problem was not with the TypeScript code itself. - Further Investigation: This led to investigating other potential causes and identifying that the JetBrains JavaScript and TypeScript plugin was outdated.
- Plugin Update: Updated the JetBrains JavaScript and TypeScript plugin to the latest version.
- Restart: Restarted the JetBrains IDE.
The issue is now resolved.