redux-toolkit icon indicating copy to clipboard operation
redux-toolkit copied to clipboard

Incompatibility with TypeScript after updating from 5.4.5 to 5.5.2

Open fix-me opened this issue 1 year ago • 1 comments

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:

  1. Set up a Redux store with @reduxjs/toolkit 2.2.6.
  2. Define a baseQuery function using Apollo Client.
  3. Use createApi with the baseQuery function.
  4. Update TypeScript from 5.4.5 to 5.5.2.
  5. Observe TypeScript errors.

fix-me avatar Jul 01 '24 11:07 fix-me

-export const baseQuery: BaseQueryFn = async (props: BaseQueryProps, api) => {
+export const baseQuery: BaseQueryFn<BaseQueryProps> = async (props, api) => {

does this help?

EskiMojo14 avatar Jul 01 '24 14:07 EskiMojo14

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:

  1. Type Checking: Added tsc --noEmit to perform type checking, which went without errors. This indicated that the problem was not with the TypeScript code itself.
  2. Further Investigation: This led to investigating other potential causes and identifying that the JetBrains JavaScript and TypeScript plugin was outdated.
  3. Plugin Update: Updated the JetBrains JavaScript and TypeScript plugin to the latest version.
  4. Restart: Restarted the JetBrains IDE.

The issue is now resolved.

fix-me avatar Jul 07 '24 23:07 fix-me