v1.9.0-beta.0

[markerikson]

This feature-complete preview release includes several new options for RTK Query API endpoints as well as the ability to "upsert" data, performance improvements to the RTK Query middleware, improvements to fetchBaseQuery behavior, several TS types tweaks and additional type exports, a runtime deprecation warning for the object argument form of createReducer and createSlice.extraReducers, and codemods to update those methods.

Please try this out and give us feedback (even if it's just "tried updating and everything's fine")! We believe that all changes intended for 1.9 are stable and should work, but as always we'd appreciate real-world checks to confirm that.

npm i @reduxjs/toolkit@next

yarn add @reduxjs/toolkit@next

Docs updates for 1.9 are in progress and can be viewed here:

https://deploy-preview-2401--redux-starter-kit-docs.netlify.app/

Changes Since Alpha

Codemods for Deprecated Object Reducer Syntax

Per the description in 1.9.0-alpha.0, we plan to remove the "object" argument from createReducer and createSlice.extraReducers in the future RTK 2.0 major version. In 1.9.0-alpha.0, we added a one-shot runtime warning to each of those APIs.

To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.

The codemods package is available on NPM as @reduxjs/rtk-codemods. It currently contains two codemods: createReducerBuilder and createSliceBuilder.

To run the codemods against your codebase, run npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js.

Examples:

npx @reduxjs/rtk-codemods createReducerBuilder ./src

npx @reduxjs/rtk-codemods createSliceBuilder ./packages/my-app/**/*.ts

We also recommend re-running Prettier on the codebase before committing the changes.

These codemods should work, but we would greatly appreciate testing and feedback on more real-world codebases!

Before:

createReducer(initialState, {
  [todoAdded1a]: (state, action) => {
    // stuff
  },
  [todoAdded1b]: (state, action) => action.payload,
});

const slice1 = createSlice({
  name: "a",
  initialState: {},
  extraReducers: {
    [todoAdded1a]: (state, action) => {
      // stuff
    },
    [todoAdded1b]: (state, action) => action.payload,
  }
})

After:

createReducer(initialState, (builder) => {
  builder.addCase(todoAdded1a, (state, action) => {
    // stuff
  });

  builder.addCase(todoAdded1b, (state, action) => action.payload);
})

const slice1 = createSlice({
  name: "a",
  initialState: {},

  extraReducers: (builder) => {
    builder.addCase(todoAdded1a, (state, action) => {
      // stuff
    });

    builder.addCase(todoAdded1b, (state, action) => action.payload);
  }
})

getRunningOperationPromises Deprecation and Replacement

In v1.7.0, we added an api.util.getRunningOperationPromises() method for use with SSR scenarios, as well as a singular getRunningOperationPromise() method intended for possible use with React Suspense.

Unfortunately, in #2477 we realized that both those methods have a fatal flaw - they do not work with multiple stores in SSR.

As of this release, we are immediately marking getRunningOperationPromises() as deprecated and discouraging its use before we remove it completely in RTK 2.0! It will now throw both runtime and compile errors in development to enforce moving away from using it. However, we are leaving its existing behavior in production builds to avoid actual breakage.

The getRunningOperationPromise() util was experimental, and as far as we can tell not actually being used by anyone, so we are removing getRunningOperationPromise completely in this release.

As replacements, RTKQ now includes four new thunks attached to api.util:

• getRunningQueryThunk(endpointName, queryArgs)
• getRunningMutationThunk(endpointName, fixedCacheKeyOrRequestId)
• getRunningQueriesThunk()
• getRunningMutationsThunk()

Usages would typically change like this:

-await Promise.all(api.util.getRunningOperationPromises())
+await Promise.all(dispatch(api.util.getRunningQueriesThunk()))

Summary of Alpha Changes

See the previous release notes for more details.

RTK Query Options

• API endpoints:
  • serializeQueryArgs option ( feature : endpoint-specific args serializers #2493 )
  • merge option ( RFC: add "merge" functionality #1059 )
  • forceRefetch option ( Add forceRefetch to QueryExtraOptions #2663 )
  • transformErrorResponse option ( add transformErrorReponse to rtkq endpoints #1841
• upsertQueryData util ( implemented upsertQueryData functionality per #1720 #2007 #2266 )
• RTKQ middleware optimization ( Consolidate RTKQ middleware to simplify stack size #2641, Speed up subscription behavior by tracking state in middleware #2759 )
• fetchBaseQuery options:
  • jsonContentType ( Add jsonContentType to fetchBaseQuery options #2403 )
  • timeout ( Add 'content-type' ResponseHandler #2363 )
  • content-type response handler ( Add 'content-type' ResponseHandler #2363 )
  • prepareHeaders can return void ( prepareHeaders does not need to return headers any more #2775 )
• hook triggers return promises ( return promise from query result & hook refetch #2212 )
• retry conditions by response ( retry condition by http error response #2239 )

TS Types

• action types are now template literals ( createSlice: use template literal types for action type #2250 )
• Store enhancer types ( feat: Add the ability to type StoreEnhancers #2550 )
• createAsyncThunk.withTypes ( add createAsyncThunk.withTypes #2604 )
• Several additional exported types:
  • add types for manually typing hook results in userland code #2276
  • RFC: Expose endpoint types #1646
  • Export the BaseQueryApi interface from rtk-query so it can be used as a type in TypeScript without importing from dist/. #2740

TS Support Matrix

Redux Toolkit now requires TypeScript 4.2 or higher, and works correctly with TS 4.8.

---

This discussion was created from the release v1.9.0-beta.0.

[leosuncin]

Typescript yield at me because dispatch(api.util.getRunningQueriesThunk()) returns QueryActionCreatorResult[] | undefined

Typescript error

yarn run v1.22.19
$ /home/user/goal-app/node_modules/.bin/tsc --noEmit --noErrorTruncation --pretty false --incremental false
src/pages/index.tsx(44,23): error TS2769: No overload matches this call.
  Overload 1 of 2, '(values: [] | readonly unknown[]): Promise<[] | unknown[]>', gave the following error.
    Argument of type 'QueryActionCreatorResult[] | undefined' is not assignable to parameter of type '[] | readonly unknown[]'.
      Type 'undefined' is not assignable to type '[] | readonly unknown[]'.
  Overload 2 of 2, '(values: Iterable<({ status: QueryStatus.uninitialized; originalArgs?: undefined; data?: undefined; error?: undefined; requestId?: undefined; endpointName?: string | undefined; startedTimeStamp?: undefined; fulfilledTimeStamp?: undefined; } & { ...; }) | ({ ...; } & { ...; }) | ({ ...; } & { ...; }) | ({ ...; } & { ...; }) | PromiseLike<...>>): Promise<...>', gave the following error.
    Argument of type 'QueryActionCreatorResult[] | undefined' is not assignable to parameter of type 'Iterable<({ status: QueryStatus.uninitialized; originalArgs?: undefined; data?: undefined; error?: undefined; requestId?: undefined; endpointName?: string | undefined; startedTimeStamp?: undefined; fulfilledTimeStamp?: undefined; } & { status: QueryStatus.uninitialized; isUninitialized: true; isLoading: false; isSuccess: false; isError: false; }) | ({ status: QueryStatus.fulfilled; error: undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; data: unknown; fulfilledTimeStamp: number; } & { status: QueryStatus.fulfilled; isUninitialized: false; isLoading: false; isSuccess: true; isError: false; }) | ({ status: QueryStatus.pending; originalArgs: unknown; requestId: string; data?: unknown; error?: unknown; endpointName: string; startedTimeStamp: number; fulfilledTimeStamp?: number | undefined; } & { status: QueryStatus.pending; isUninitialized: false; isLoading: true; isSuccess: false; isError: false; }) | ({ status: QueryStatus.rejected; data?: unknown; fulfilledTimeStamp?: number | undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; error: unknown; } & { status: QueryStatus.rejected; isUninitialized: false; isLoading: false; isSuccess: false; isError: true; }) | PromiseLike<({ status: QueryStatus.uninitialized; originalArgs?: undefined; data?: undefined; error?: undefined; requestId?: undefined; endpointName?: string | undefined; startedTimeStamp?: undefined; fulfilledTimeStamp?: undefined; } & { status: QueryStatus.uninitialized; isUninitialized: true; isLoading: false; isSuccess: false; isError: false; }) | ({ status: QueryStatus.fulfilled; error: undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; data: unknown; fulfilledTimeStamp: number; } & { status: QueryStatus.fulfilled; isUninitialized: false; isLoading: false; isSuccess: true; isError: false; }) | ({ status: QueryStatus.pending; originalArgs: unknown; requestId: string; data?: unknown; error?: unknown; endpointName: string; startedTimeStamp: number; fulfilledTimeStamp?: number | undefined; } & { status: QueryStatus.pending; isUninitialized: false; isLoading: true; isSuccess: false; isError: false; }) | ({ status: QueryStatus.rejected; data?: unknown; fulfilledTimeStamp?: number | undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; error: unknown; } & { status: QueryStatus.rejected; isUninitialized: false; isLoading: false; isSuccess: false; isError: true; })>>'.
      Type 'undefined' is not assignable to type 'Iterable<({ status: QueryStatus.uninitialized; originalArgs?: undefined; data?: undefined; error?: undefined; requestId?: undefined; endpointName?: string | undefined; startedTimeStamp?: undefined; fulfilledTimeStamp?: undefined; } & { status: QueryStatus.uninitialized; isUninitialized: true; isLoading: false; isSuccess: false; isError: false; }) | ({ status: QueryStatus.fulfilled; error: undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; data: unknown; fulfilledTimeStamp: number; } & { status: QueryStatus.fulfilled; isUninitialized: false; isLoading: false; isSuccess: true; isError: false; }) | ({ status: QueryStatus.pending; originalArgs: unknown; requestId: string; data?: unknown; error?: unknown; endpointName: string; startedTimeStamp: number; fulfilledTimeStamp?: number | undefined; } & { status: QueryStatus.pending; isUninitialized: false; isLoading: true; isSuccess: false; isError: false; }) | ({ status: QueryStatus.rejected; data?: unknown; fulfilledTimeStamp?: number | undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; error: unknown; } & { status: QueryStatus.rejected; isUninitialized: false; isLoading: false; isSuccess: false; isError: true; }) | PromiseLike<({ status: QueryStatus.uninitialized; originalArgs?: undefined; data?: undefined; error?: undefined; requestId?: undefined; endpointName?: string | undefined; startedTimeStamp?: undefined; fulfilledTimeStamp?: undefined; } & { status: QueryStatus.uninitialized; isUninitialized: true; isLoading: false; isSuccess: false; isError: false; }) | ({ status: QueryStatus.fulfilled; error: undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; data: unknown; fulfilledTimeStamp: number; } & { status: QueryStatus.fulfilled; isUninitialized: false; isLoading: false; isSuccess: true; isError: false; }) | ({ status: QueryStatus.pending; originalArgs: unknown; requestId: string; data?: unknown; error?: unknown; endpointName: string; startedTimeStamp: number; fulfilledTimeStamp?: number | undefined; } & { status: QueryStatus.pending; isUninitialized: false; isLoading: true; isSuccess: false; isError: false; }) | ({ status: QueryStatus.rejected; data?: unknown; fulfilledTimeStamp?: number | undefined; originalArgs: unknown; requestId: string; endpointName: string; startedTimeStamp: number; error: unknown; } & { status: QueryStatus.rejected; isUninitialized: false; isLoading: false; isSuccess: false; isError: true; })>>'.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduction repository: https://github.com/leosuncin/goal-app/tree/rtk-next

[markerikson]

Hmm. The TS error sounds correct based on the types, the question is what we want the types to be.

@phryneas , thoughts?

[phryneas]

  function getRunningQueriesThunk() {
    return (dispatch: Dispatch) =>
      Object.values(runningQueries.get(dispatch) || {}).filter(isNotNullish)
  }

can never return undefined, so we should probably change that type

[markerikson]

Oh. Lenz, the problem is:

interface ThunkWithReturnValue<T>
  extends ThunkAction<T | undefined, any, any, AnyAction> {}

I'm editing the type to remove | undefined, especially since both the "single" thunks already have that in their generic arg anyway.

[swon3210]

I think the promise Returned By getRunningQueryThunk does not sync with actual useQuery life cycle.

const args = { name: "pikachu" };

const Pokemon = () => {
  const { data } = useGetPokemonByNameQuery(args);
  const dispatch = useDispatch();

  const thunk = pokemonApi.util.getRunningQueryThunk("getPokemonByName", args);

  const promise = dispatch(thunk as any);

  console.log("promise", promise);

  if (promise) {
    throw promise;
  }

  return (
    <>
      <h3>{data.species.name}</h3>
      <img src={data.sprites.front_shiny} alt={data.species.name} />
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Pokemon />
      </Suspense>
    </div>
  );
}

I tried using React Suspense with RTKQ with api.util.getRunningQueryThunk method, but no matter what I do, the first value of promise is always undefined. I thought because 'useGetPokemonByNameQuery' was called before 'getRunningQueryThunk', the promise returned by dispatch(thunk) should be a promise which is pending, but it is not.

if I put if (!data) { return <div>loading...</div>} for making things work, the promise is logged with 3 times with pending phase.

here is my code sandbox link in case you need this.

https://codesandbox.io/s/jolly-rain-gclhfp?file=/src/App.tsx:522-575

I want to know if I am doing something wrong or not.

thank you.

[markerikson]

@swon3210 the first answer is, we definitely do not support Suspense yet! :) So no, I would not expect that to work at all.

Second, the request gets kicked off in a useEffect, which will run after this component is done rendering. So yes, there definitely wouldn't be a promise during the first render.