Only run transformResponse when a query is used (#5049)

Author: markerikson

packages/toolkit/src/query/core/buildThunks.ts

@@ -510,10 +510,7 @@ export function buildThunks<
  endpointDefinition
 
  try {
- let transformResponse = getTransformCallbackForEndpoint(
- endpointDefinition,
- 'transformResponse',
- )
+ let transformResponse: TransformCallback = defaultTransformResponse
 
  const baseQueryApi = {
  signal,
@@ -587,6 +584,13 @@ export function buildThunks<
  // upsertQueryData relies on this to pass in the user-provided value
  result = forceQueryFn()
  } else if (endpointDefinition.query) {
+ // We should only run `transformResponse` when the endpoint has a `query` method,
+ // and we're not doing an `upsertQueryData`.
+ transformResponse = getTransformCallbackForEndpoint(
+ endpointDefinition,
+ 'transformResponse',
+ )
+
  result = await baseQuery(
  endpointDefinition.query(finalQueryArg as any),
  baseQueryApi,

packages/toolkit/src/query/tests/buildThunks.test.tsx

@@ -4,71 +4,115 @@ import { renderHook, waitFor } from '@testing-library/react'
 import { actionsReducer, withProvider } from '../../tests/utils/helpers'
 import type { BaseQueryApi } from '../baseQueryTypes'
 
-test('handles a non-async baseQuery without error', async () => {
- const baseQuery = (args?: any) => ({ data: args })
- const api = createApi({
- baseQuery,
- endpoints: (build) => ({
- getUser: build.query<unknown, number>({
- query(id) {
- return { url: `user/${id}` }
- },
+describe('baseline thunk behavior', () => {
+ test('handles a non-async baseQuery without error', async () => {
+ const baseQuery = (args?: any) => ({ data: args })
+ const api = createApi({
+ baseQuery,
+ endpoints: (build) => ({
+ getUser: build.query<unknown, number>({
+ query(id) {
+ return { url: `user/${id}` }
+ },
+ }),
  }),
- }),
- })
- const { getUser } = api.endpoints
- const store = configureStore({
- reducer: {
- [api.reducerPath]: api.reducer,
- },
- middleware: (gDM) => gDM().concat(api.middleware),
- })
-
- const promise = store.dispatch(getUser.initiate(1))
- const { data } = await promise
+ })
+ const { getUser } = api.endpoints
+ const store = configureStore({
+ reducer: {
+ [api.reducerPath]: api.reducer,
+ },
+ middleware: (gDM) => gDM().concat(api.middleware),
+ })
 
- expect(data).toEqual({
- url: 'user/1',
- })
+ const promise = store.dispatch(getUser.initiate(1))
+ const { data } = await promise
 
- const storeResult = getUser.select(1)(store.getState())
- expect(storeResult).toEqual({
- data: {
+ expect(data).toEqual({
  url: 'user/1',
- },
- endpointName: 'getUser',
- isError: false,
- isLoading: false,
- isSuccess: true,
- isUninitialized: false,
- originalArgs: 1,
- requestId: expect.any(String),
- status: 'fulfilled',
- startedTimeStamp: expect.any(Number),
- fulfilledTimeStamp: expect.any(Number),
+ })
+
+ const storeResult = getUser.select(1)(store.getState())
+ expect(storeResult).toEqual({
+ data: {
+ url: 'user/1',
+ },
+ endpointName: 'getUser',
+ isError: false,
+ isLoading: false,
+ isSuccess: true,
+ isUninitialized: false,
+ originalArgs: 1,
+ requestId: expect.any(String),
+ status: 'fulfilled',
+ startedTimeStamp: expect.any(Number),
+ fulfilledTimeStamp: expect.any(Number),
+ })
  })
-})
 
-test('passes the extraArgument property to the baseQueryApi', async () => {
- const baseQuery = (_args: any, api: BaseQueryApi) => ({ data: api.extra })
- const api = createApi({
- baseQuery,
- endpoints: (build) => ({
- getUser: build.query<unknown, void>({
- query: () => '',
+ test('passes the extraArgument property to the baseQueryApi', async () => {
+ const baseQuery = (_args: any, api: BaseQueryApi) => ({ data: api.extra })
+ const api = createApi({
+ baseQuery,
+ endpoints: (build) => ({
+ getUser: build.query<unknown, void>({
+ query: () => '',
+ }),
  }),
- }),
+ })
+ const store = configureStore({
+ reducer: {
+ [api.reducerPath]: api.reducer,
+ },
+ middleware: (gDM) =>
+ gDM({ thunk: { extraArgument: 'cakes' } }).concat(api.middleware),
+ })
+ const { getUser } = api.endpoints
+ const { data } = await store.dispatch(getUser.initiate())
+ expect(data).toBe('cakes')
  })
- const store = configureStore({
- reducer: {
- [api.reducerPath]: api.reducer,
- },
- middleware: (gDM) =>
- gDM({ thunk: { extraArgument: 'cakes' } }).concat(api.middleware),
+
+ test('only triggers transformResponse when a query method is actually used', async () => {
+ const baseQuery = (args?: any) => ({ data: args })
+ const transformResponse = vi.fn((response: any) => response)
+ const api = createApi({
+ baseQuery,
+ endpoints: (build) => ({
+ hasQuery: build.query<string, string>({
+ query: (arg) => 'test',
+ transformResponse,
+ }),
+ hasQueryFn: build.query<string, void>(
+ // @ts-expect-error
+ {
+ queryFn: () => ({ data: 'test' }),
+ transformResponse,
+ },
+ ),
+ }),
+ })
+
+ const store = configureStore({
+ reducer: {
+ [api.reducerPath]: api.reducer,
+ },
+ middleware: (gDM) =>
+ gDM({ thunk: { extraArgument: 'cakes' } }).concat(api.middleware),
+ })
+
+ await store.dispatch(api.util.upsertQueryData('hasQuery', 'a', 'test'))
+ expect(transformResponse).not.toHaveBeenCalled()
+
+ transformResponse.mockReset()
+
+ await store.dispatch(api.endpoints.hasQuery.initiate('b'))
+ expect(transformResponse).toHaveBeenCalledTimes(1)
+
+ transformResponse.mockReset()
+
+ await store.dispatch(api.endpoints.hasQueryFn.initiate())
+ expect(transformResponse).not.toHaveBeenCalled()
  })
- const { getUser } = api.endpoints
- const { data } = await store.dispatch(getUser.initiate())
- expect(data).toBe('cakes')
 })
 
 describe('re-triggering behavior on arg change', () => {