@reduxjs/toolkit

This release fixes a TS types bug with RTK Query generated selectors, makes the RTKQ structural sharing behavior configurable, adds an option to have the serializability middleware ignore all actions, and has several minor bugfixes and enhancements to RTK Query.

Changelog

RTK Query Selector TS Types Fix

Several users had reported that as of 1.7.0 selectors generated via apiSlice.endpoint.select() were failing to compile when used, with TS errors that looked like Type '{}' is missing the following properties from type 'CombinedState<>.

We've fixed the issue, and selectors should now compile correctly when used with TS.

Additional Configuration Options

RTK Query implements a technique called "structural sharing" to preserve existing object references if possible when data for an endpoint is re-fetched. RTKQ recurses over both data structures, and if the contents appear to be the same, keeps the existing values. That helps avoid potential unnecessary re-renders in the UI, because otherwise the entire re-fetched result would be new object references.

However, this update process can potentially take time depending on the size of the response. Endpoints can now be given a structuralSharing option that will turn that off to save on processing time:

    const api = createApi({
      baseQuery: fetchBaseQuery({ baseUrl: "https://example.com" }),
      endpoints: (build) => ({
        getEveryEntityInADatabase: build.query({
          query: () => ({ url: "/i-cant-paginate-data" }),
          structuralSharing: false,
        }),
      }),
    });

Additionally, the serializability check middleware can now be customized with an ignoreActions option to exempt all actions from being checked. This is an escape hatch and isn't recommended for most apps:

    const store = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: {
            ignoreActions: true,
          },
        }),
    });

Other API Improvements

If an extraArgument was provided to the thunk middleware during store configuration, that value is now passed along to the prepareHeaders() function:

  const store = configureStore({
	reducer: rootReducer,
	middleware: (getDefaultMiddleware) =>
	  getDefaultMiddleware({
		thunk: {
		  extraArgument: { myCustomApiService },
		},
	  }),
  });

  // ..later on
  const api = createApi({
	baseQuery: fetchBaseQuery({
	  baseUrl: "https://example.com",
	  prepareHeaders: async (headers, { getState, extra }) => {
		const token = getState().auth.token;
		const somethingElse = await extra.myCustomApiService.someMethod();
		// do things with somethingElse
		return headers;
	  },
	}),
  });

The invalidatesTags/providesTags functions now receive the action.meta field as an argument, to help with potentially invalidating based on request/response headers.

Bug Fixes

refetchOnFocus now cleans up cache entries if a focus event is received and there are no active subscriptions, to avoid unnecessary requests.

Active polls are cleaned up when the last component for a given subscription unsubscribes.

The types for builder.addMatcher have been updated to support inference of guards without a type property.

What's Changed

• meta: Passes meta to result description functions [#1904]

• Fix addMatcher typings

• Pass baseQueryMeta into calculateProvidedBy

• Cleanup polls on unsubscribeQueryResult

• Add extra to prepareHeaders, update documentation + tests

• Fix reducerPath for query definitions

• Update serialize documentation link

• Refetch should not happen if no active subscribers

• Add ignoreActions flag to serializable state middleware

• RTKQ: Configurable structuralSharing on endpoints/queries/createApi