Merge pull request #2436 from Shrugsy/examples/renovate-kitchen-sink

Author: markerikson

examples/query/react/kitchen-sink/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.39.2).
+ * Mock Service Worker (0.41.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

examples/query/react/kitchen-sink/src/App.tsx

@@ -27,7 +27,7 @@ function App() {
         <Routes>
           <Route path="/" element={<TimeList />} />
           <Route path="/counters" element={<CounterList />} />
-          <Route path="/posts" element={<PostsManager />} />
+          <Route path="/posts/*" element={<PostsManager />} />
           <Route path="/bundleSplitting" element={<Lazy />} />
         </Routes>
       </div>

examples/query/react/kitchen-sink/src/app/services/api.ts

@@ -0,0 +1,55 @@
+import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react'
+import { RootState } from '../store'
+
+// Create our baseQuery instance
+const baseQuery = fetchBaseQuery({
+  baseUrl: '/',
+  prepareHeaders: (headers, { getState }) => {
+    // By default, if we have a token in the store, let's use that for authenticated requests
+    const token = (getState() as RootState).auth.token
+    if (token) {
+      headers.set('authentication', `Bearer ${token}`)
+    }
+    return headers
+  },
+})
+
+const baseQueryWithRetry = retry(baseQuery, { maxRetries: 6 })
+
+/**
+ * Create a base API to inject endpoints into elsewhere.
+ * Components using this API should import from the injected site,
+ * in order to get the appropriate types,
+ * and to ensure that the file injecting the endpoints is loaded 
+ */
+export const api = createApi({
+  /**
+   * `reducerPath` is optional and will not be required by most users.
+   * This is useful if you have multiple API definitions,
+   * e.g. where each has a different domain, with no interaction between endpoints.
+   * Otherwise, a single API definition should be used in order to support tag invalidation,
+   * among other features
+   */
+  reducerPath: 'splitApi',
+  /**
+   * A bare bones base query would just be `baseQuery: fetchBaseQuery({ baseUrl: '/' })`
+   */
+  baseQuery: baseQueryWithRetry,
+  /**
+   * Tag types must be defined in the original API definition
+   * for any tags that would be provided by injected endpoints
+   */
+  tagTypes: ['Time', 'Posts', 'Counter'],
+  /**
+   * This api has endpoints injected in adjacent files,
+   * which is why no endpoints are shown below.
+   * If you want all endpoints defined in the same file, they could be included here instead
+   */
+  endpoints: () => ({}),
+})
+
+export const enhancedApi = api.enhanceEndpoints({
+  endpoints: () => ({
+    getPost: () => 'test',
+  }),
+})

examples/query/react/kitchen-sink/src/app/services/counter.ts

@@ -1,13 +1,10 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { api } from './api'
 
 interface CountResponse {
   count: number
 }
 
-export const counterApi = createApi({
-  reducerPath: 'counterApi',
-  baseQuery: fetchBaseQuery(),
-  tagTypes: ['Counter'],
+export const counterApi = api.injectEndpoints({
   endpoints: (build) => ({
     getCount: build.query<CountResponse, void>({
       query: () => 'count',

examples/query/react/kitchen-sink/src/app/services/split/post.ts renamed to examples/query/react/kitchen-sink/src/app/services/post.ts

@@ -1,6 +1,7 @@
-import { emptySplitApi, Post } from '.'
+import { api } from './api'
+import { Post } from './posts'
 
-export const apiWithPost = emptySplitApi.injectEndpoints({
+export const postApi = api.injectEndpoints({
   endpoints: (build) => ({
     addPost: build.mutation<Post, Partial<Post>>({
       query(body) {

examples/query/react/kitchen-sink/src/app/services/posts.ts

@@ -1,5 +1,5 @@
-import { createApi, fetchBaseQuery, retry } from '@reduxjs/toolkit/query/react'
-import { RootState } from '../store'
+import { retry } from '@reduxjs/toolkit/query/react'
+import { api } from './api'
 
 export interface Post {
   id: number
@@ -16,25 +16,7 @@ export interface User {
   phone: string
 }
 
-// Create our baseQuery instance
-const baseQuery = fetchBaseQuery({
-  baseUrl: '/',
-  prepareHeaders: (headers, { getState }) => {
-    // By default, if we have a token in the store, let's use that for authenticated requests
-    const token = (getState() as RootState).auth.token
-    if (token) {
-      headers.set('authentication', `Bearer ${token}`)
-    }
-    return headers
-  },
-})
-
-const baseQueryWithRetry = retry(baseQuery, { maxRetries: 6 })
-
-export const postApi = createApi({
-  reducerPath: 'postsApi', // We only specify this because there are many services. This would not be common in most applications
-  baseQuery: baseQueryWithRetry,
-  tagTypes: ['Posts'],
+export const postsApi = api.injectEndpoints({
   endpoints: (build) => ({
     login: build.mutation<{ token: string; user: User }, any>({
       query: (credentials: any) => ({
@@ -102,8 +84,8 @@ export const {
   useLoginMutation,
   useUpdatePostMutation,
   useGetErrorProneQuery,
-} = postApi
+} = postsApi
 
 export const {
   endpoints: { login, getPost },
-} = postApi
+} = postsApi

examples/query/react/kitchen-sink/src/app/services/split/index.ts

@@ -1,13 +1,10 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { api } from './api'
 
 interface TimeResponse {
   time: string
 }
 
-export const timeApi = createApi({
-  reducerPath: 'timeApi',
-  baseQuery: fetchBaseQuery(),
-  tagTypes: ['Time'],
+export const timeApi = api.injectEndpoints({
   endpoints: (build) => ({
     getTime: build.query<TimeResponse, string>({
       query: (id) => `time/${id}`,

examples/query/react/kitchen-sink/src/app/services/split/posts.ts

@@ -1,37 +1,26 @@
 import { configureStore, ConfigureStoreOptions } from '@reduxjs/toolkit'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { counterApi } from './services/counter'
-import { postApi } from './services/posts'
-import { timeApi } from './services/times'
+import { api } from './services/api'
 import polling from '../features/polling/pollingSlice'
-import { splitApi } from './services/split'
 import auth from '../features/auth/authSlice'
 
 export const createStore = (
   options?: ConfigureStoreOptions['preloadedState'] | undefined
 ) =>
   configureStore({
     reducer: {
-      [counterApi.reducerPath]: counterApi.reducer,
-      [postApi.reducerPath]: postApi.reducer,
-      [timeApi.reducerPath]: timeApi.reducer,
-      [splitApi.reducerPath]: splitApi.reducer,
+      [api.reducerPath]: api.reducer,
       polling,
       auth,
     },
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(
-        counterApi.middleware,
-        postApi.middleware,
-        timeApi.middleware,
-        splitApi.middleware
-      ),
+      getDefaultMiddleware().concat(api.middleware),
     ...options,
   })
 
 export const store = createStore()
 
 export type AppDispatch = typeof store.dispatch
-export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppDispatch: () => AppDispatch = useDispatch
 export type RootState = ReturnType<typeof store.getState>
 export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector