| [a762898] | 1 | import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
|
|---|
| 2 |
|
|---|
| 3 | import { configureStore, createSelector } from '@reduxjs/toolkit'
|
|---|
| 4 |
|
|---|
| 5 | describe('type tests', () => {
|
|---|
| 6 | test('buildSelector type test', () => {
|
|---|
| 7 | interface Todo {
|
|---|
| 8 | userId: number
|
|---|
| 9 | id: number
|
|---|
| 10 | title: string
|
|---|
| 11 | completed: boolean
|
|---|
| 12 | }
|
|---|
| 13 |
|
|---|
| 14 | type Todos = Array<Todo>
|
|---|
| 15 |
|
|---|
| 16 | const exampleApi = createApi({
|
|---|
| 17 | reducerPath: 'api',
|
|---|
| 18 | baseQuery: fetchBaseQuery({
|
|---|
| 19 | baseUrl: 'https://jsonplaceholder.typicode.com',
|
|---|
| 20 | }),
|
|---|
| 21 | endpoints: (build) => ({
|
|---|
| 22 | getTodos: build.query<Todos, string>({
|
|---|
| 23 | query: () => '/todos',
|
|---|
| 24 | }),
|
|---|
| 25 | }),
|
|---|
| 26 | })
|
|---|
| 27 |
|
|---|
| 28 | const exampleQuerySelector = exampleApi.endpoints.getTodos.select('/')
|
|---|
| 29 |
|
|---|
| 30 | const todosSelector = createSelector(
|
|---|
| 31 | [exampleQuerySelector],
|
|---|
| 32 | (queryState) => {
|
|---|
| 33 | return queryState?.data?.[0] ?? ({} as Todo)
|
|---|
| 34 | },
|
|---|
| 35 | )
|
|---|
| 36 |
|
|---|
| 37 | const firstTodoTitleSelector = createSelector(
|
|---|
| 38 | [todosSelector],
|
|---|
| 39 | (todo) => todo?.title,
|
|---|
| 40 | )
|
|---|
| 41 |
|
|---|
| 42 | const store = configureStore({
|
|---|
| 43 | reducer: {
|
|---|
| 44 | [exampleApi.reducerPath]: exampleApi.reducer,
|
|---|
| 45 | other: () => 1,
|
|---|
| 46 | },
|
|---|
| 47 | })
|
|---|
| 48 |
|
|---|
| 49 | const todoTitle = firstTodoTitleSelector(store.getState())
|
|---|
| 50 |
|
|---|
| 51 | // This only compiles if we carried the types through
|
|---|
| 52 | const upperTitle = todoTitle.toUpperCase()
|
|---|
| 53 |
|
|---|
| 54 | expectTypeOf(upperTitle).toBeString()
|
|---|
| 55 | })
|
|---|
| 56 |
|
|---|
| 57 | test('selectCachedArgsForQuery type test', () => {
|
|---|
| 58 | interface Todo {
|
|---|
| 59 | userId: number
|
|---|
| 60 | id: number
|
|---|
| 61 | title: string
|
|---|
| 62 | completed: boolean
|
|---|
| 63 | }
|
|---|
| 64 |
|
|---|
| 65 | type Todos = Array<Todo>
|
|---|
| 66 |
|
|---|
| 67 | const exampleApi = createApi({
|
|---|
| 68 | reducerPath: 'api',
|
|---|
| 69 | baseQuery: fetchBaseQuery({
|
|---|
| 70 | baseUrl: 'https://jsonplaceholder.typicode.com',
|
|---|
| 71 | }),
|
|---|
| 72 | endpoints: (build) => ({
|
|---|
| 73 | getTodos: build.query<Todos, string>({
|
|---|
| 74 | query: () => '/todos',
|
|---|
| 75 | }),
|
|---|
| 76 | getInfiniteTodos: build.infiniteQuery<Todos, string, number>({
|
|---|
| 77 | infiniteQueryOptions: {
|
|---|
| 78 | initialPageParam: 0,
|
|---|
| 79 | maxPages: 3,
|
|---|
| 80 | getNextPageParam: (
|
|---|
| 81 | lastPage,
|
|---|
| 82 | allPages,
|
|---|
| 83 | lastPageParam,
|
|---|
| 84 | allPageParams,
|
|---|
| 85 | ) => lastPageParam + 1,
|
|---|
| 86 | },
|
|---|
| 87 | query({ pageParam }) {
|
|---|
| 88 | return `/todos?page=${pageParam}`
|
|---|
| 89 | },
|
|---|
| 90 | }),
|
|---|
| 91 | }),
|
|---|
| 92 | })
|
|---|
| 93 |
|
|---|
| 94 | const store = configureStore({
|
|---|
| 95 | reducer: {
|
|---|
| 96 | [exampleApi.reducerPath]: exampleApi.reducer,
|
|---|
| 97 | other: () => 1,
|
|---|
| 98 | },
|
|---|
| 99 | })
|
|---|
| 100 |
|
|---|
| 101 | expectTypeOf(
|
|---|
| 102 | exampleApi.util.selectCachedArgsForQuery(store.getState(), 'getTodos'),
|
|---|
| 103 | ).toEqualTypeOf<string[]>()
|
|---|
| 104 | expectTypeOf(
|
|---|
| 105 | exampleApi.util.selectCachedArgsForQuery(
|
|---|
| 106 | store.getState(),
|
|---|
| 107 | 'getInfiniteTodos',
|
|---|
| 108 | ),
|
|---|
| 109 | ).toEqualTypeOf<string[]>()
|
|---|
| 110 | })
|
|---|
| 111 | })
|
|---|