How to getSelectors through passing arg in endpoint.select() in Redux RTK - react-redux

Question

I currently have this piece of code.
const initialState = documentsAdapter.getInitialState()
export const setupsApiSlice = apiSlice.injectEndpoints({
tagTypes: ['Setup'],
endpoints: builder => ({
getSetups: builder.query({
query: (documentId) => ({
url: `/documents/${documentId}/setups`,
method: 'GET'
}),
providesTags: ['Setup']
}),
})
})
export const {
useGetSetupsQuery,
useAddSetupsMutation,
useUpdateSetupsMutation,
useDeleteSetupsMutation
} = apiSlice
And now I want to make use of the of the getSelector and do something like this (not implemented).
export const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select()
// Creates memoized selector
const selectSetupsData = createSelector(
selectSetupsResult,
setupsResult => setupsResult.data // normalized state object with ids & entities
)
export const {
selectAll: selectAllSetups,
selectById: selectSetupById,
selectIds: selectSetupIds,
} = setupsAdapter.getSelectors(state => selectSetupsData(state) ?? initialState)
The problem that I encounter is that endpoint.select() needs an argument in my case so that I can call setups on the correct documentId. I know I could just call all the setups and then filter out the ones that have the same documentId, but I was wondering if there is any other way. Even if it means not calling the endpoints.select() and still being able to use the getSelectors().

Answer 1

const initialState = documentsAdapter.getInitialState()
export const setupsApiSlice = apiSlice.injectEndpoints({
tagTypes: ['Setup'],
endpoints: builder => ({
getSetups: builder.query({
query: (documentId) => ({
url: `/documents/${documentId}/setups`,
method: 'GET'
}),
// Add transformResponse
transformResponse: (responseData) => {
return documentsAdapter.setAll(initialState, responseData)
},
providesTags: ['Setup']
}),
})
})
// Define function to get selectors based on arguments (query) of getSetups
export const getSelectors = (
query,
) => {
const selectSetupsResult = setupsApiSlice.endpoints.getSetups.select(query)
const adapterSelectors = createSelector(
selectSetupsResult,
(result) => documentsAdapter.getSelectors(() => result?.data ?? initialState)
)
return {
selectAll: createSelector(adapterSelectors, (s) =>
s.selectAll(undefined)
),
selectEntities: createSelector(adapterSelectors, (s) =>
s.selectEntities(undefined)
),
selectIds: createSelector(adapterSelectors, (s) =>
s.selectIds(undefined)
),
selectTotal: createSelector(adapterSelectors, (s) =>
s.selectTotal(undefined)
),
selectById: (id) => createSelector(adapterSelectors, (s) =>
s.selectById(s, id)
),
}
}
Then you can use it in a component as:
const { isFetching } = useGetSetupsQuery({id: 1})
// Dinamically get selectors based on parent query
const { selectAll: selectAllFromId1, selectById: selectByIdFromId1 } = getSelectors({id: 1})
// Use selectors based on parent id 1
const allFromId1 = useSelector(selectAllFromId1)
const setup1fromId1 = useSelector(selectByIdFromId1(5)) // get id 5