Add tests and fix things 🎉

Author: msutkowski

examples/query/react/pagination/src/app/services/posts.ts

@@ -24,6 +24,7 @@ export const api = createApi({
   endpoints: (build) => ({
     listPosts: build.query<ListResponse<Post>, number | void>({
       query: (page = 1) => `posts?page=${page}`,
+      structuralSharing: false,
     }),
   }),
 })

examples/query/react/pagination/src/features/posts/PostsManager.tsx

@@ -29,7 +29,12 @@ const getColorForStatus = (status: Post['status']) => {
 
 const PostList = () => {
   const [page, setPage] = React.useState(1)
-  const { data: posts, isLoading, isFetching } = useListPostsQuery(page)
+  const {
+    data: posts,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useListPostsQuery(page)
 
   if (isLoading) {
     return <div>Loading</div>
@@ -42,6 +47,19 @@ const PostList = () => {
   return (
     <Box>
       <HStack spacing="14px">
+        <Button
+          onClick={async () => {
+            try {
+              const result = refetch()
+
+              console.log({ result })
+            } catch (err) {
+              console.error(err)
+            }
+          }}
+        >
+          REFETCH!
+        </Button>
         <Button
           onClick={() => setPage((prev) => prev - 1)}
           isLoading={isFetching}

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

@@ -265,7 +265,7 @@ Features like automatic cache collection, automatic refetching etc. will not be
           subscribe = true,
           forceRefetch,
           subscriptionOptions,
-          structuralSharing = true,
+          structuralSharing,
         } = {}
       ) =>
       (dispatch, getState) => {

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

@@ -92,7 +92,7 @@ export function buildSlice({
     apiUid,
     extractRehydrationInfo,
     hasRehydrationInfo,
-    structuralSharing,
+    structuralSharing: globalStructuralSharing,
   },
   assertTagType,
   config,
@@ -156,10 +156,16 @@ export function buildSlice({
             draft,
             meta.arg.queryCacheKey,
             (substate) => {
+              const endpointStructuralSharing =
+                definitions[meta.arg.endpointName].structuralSharing
+              const argStructuralSharing = meta.arg.structuralSharing
+
               if (substate.requestId !== meta.requestId) return
               substate.status = QueryStatus.fulfilled
               substate.data =
-                structuralSharing && meta.arg.structuralSharing
+                argStructuralSharing ??
+                endpointStructuralSharing ??
+                globalStructuralSharing
                   ? copyWithStructuralSharing(substate.data, payload)
                   : payload
               delete substate.error

packages/toolkit/src/query/react/buildHooks.ts

@@ -142,6 +142,16 @@ interface UseQuerySubscriptionOptions extends SubscriptionOptions {
    * If you specify this option alongside `skip: true`, this **will not be evaluated** until `skip` is false.
    */
   refetchOnMountOrArgChange?: boolean | number
+  /**
+   * Defaults to `true`.
+   *
+   * Most apps should leave this setting on. The only time it can be a performance issue
+   * is if an API returns extremely large amounts of data (e.g. 10,000 rows per request) and
+   * you're unable to paginate it.
+   *
+   * @see https://redux-toolkit.js.org/api/other-exports#copywithstructuralsharing
+   */
+  structuralSharing?: boolean
 }
 
 /**
@@ -611,6 +621,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
         refetchOnMountOrArgChange,
         skip = false,
         pollingInterval = 0,
+        structuralSharing,
       } = {}
     ) => {
       const { initiate } = api.endpoints[name] as ApiEndpointQuery<
@@ -668,6 +679,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
             initiate(stableArg, {
               subscriptionOptions: stableSubscriptionOptions,
               forceRefetch: refetchOnMountOrArgChange,
+              structuralSharing,
             })
           )
           promiseRef.current = promise

packages/toolkit/src/query/tests/createApi.test.ts

@@ -17,6 +17,7 @@ import {
 } from './helpers'
 import { server } from './mocks/server'
 import { rest } from 'msw'
+import * as utils from '../utils'
 
 const originalEnv = process.env.NODE_ENV
 beforeAll(() => void ((process.env as any).NODE_ENV = 'development'))
@@ -763,3 +764,62 @@ test('providesTags and invalidatesTags can use baseQueryMeta', async () => {
 
   expect('request' in _meta! && 'response' in _meta!).toBe(true)
 })
+
+describe('strucutralSharing flag behaviors', () => {
+  const mockCopyFn = jest.spyOn(utils, 'copyWithStructuralSharing')
+
+  beforeEach(() => {
+    mockCopyFn.mockClear()
+  })
+
+  type SuccessResponse = { value: 'success' }
+
+  const apiSuccessResponse: SuccessResponse = { value: 'success' }
+
+  const api = createApi({
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
+    tagTypes: ['success'],
+    endpoints: (build) => ({
+      enabled: build.query<SuccessResponse, void>({
+        query: () => '/success',
+      }),
+      disabled: build.query<SuccessResponse, void>({
+        query: () => ({ url: '/success' }),
+        structuralSharing: false,
+      }),
+    }),
+  })
+
+  const storeRef = setupApiStore(api)
+
+  it('enables structural sharing for query endpoints by default', async () => {
+    const result = await storeRef.store.dispatch(
+      api.endpoints.enabled.initiate()
+    )
+    expect(mockCopyFn).toHaveBeenCalledTimes(1)
+    expect(result.data).toMatchObject(apiSuccessResponse)
+  })
+  it('allows a query endpoint to opt-out of structural sharing', async () => {
+    const result = await storeRef.store.dispatch(
+      api.endpoints.disabled.initiate()
+    )
+    expect(mockCopyFn).toHaveBeenCalledTimes(0)
+    expect(result.data).toMatchObject(apiSuccessResponse)
+  })
+  it('allows initiate to override endpoint and global settings and disable at the call site level', async () => {
+    // global flag is enabled, endpoint is also enabled by default
+    const result = await storeRef.store.dispatch(
+      api.endpoints.enabled.initiate(undefined, { structuralSharing: false })
+    )
+    expect(mockCopyFn).toHaveBeenCalledTimes(0)
+    expect(result.data).toMatchObject(apiSuccessResponse)
+  })
+  it('allows initiate to override the endpoint flag and enable sharing at the call site', async () => {
+    // global flag is enabled, endpoint is disabled
+    const result = await storeRef.store.dispatch(
+      api.endpoints.disabled.initiate(undefined, { structuralSharing: true })
+    )
+    expect(mockCopyFn).toHaveBeenCalledTimes(1)
+    expect(result.data).toMatchObject(apiSuccessResponse)
+  })
+})