Using RTK query with multiple parameters retrieved from redux

Hello there. I have recently started using RTK query to fetch and cache my data in my frontend and I have some questions. My use case is the following:

• I have some filters on my app
• When a filter changes, a new request is executed to fetch resources
• The current selection of the filters are stored in redux
• For each filter, more than one values might be selected and as a result each one of them is an array of selected values.
• I want to use RTK in order to cache the responses for each selection of filters
• I use queryFn instead of query since I fetch data in a custom way

The api is defined as following:

    export const resourcesApi = createApi({
    	reducerPath: 'resourcesApi',
    	endpoints: (builder) => ({
    		getResources: builder.query({
    			queryFn: ({selectedFilter1, selectedFilter2}) => {
                            // this function fetches the data
                		return getResourcesBasedOnFilters(selectedFilter1, selectedFilter2)
    		},
    		}),
    	}),
    })
    
    export const { useGetResourcesQuery } = resourcesApi

And I call it using:

export default function Resources(props){
    let selectedFilter1 = useSelector((state) => state.filters.selectedFilter1)
    let selectedFilter2 = useSelector((state) => state.filters.selectedFilter2)
    
    const {isLoading, isFetching, data} = useGetResourcesQuery({selectedFilter1, selectedFilter2})

    if (isLoading){
        // show loader
    }
    else{
        // show data
    }
}

My questions are the following: 

• The more filters I have, the slower redux becomes. Can I do something for it?
• Can I access the filters directly in queryFn ?

[fregayeg]

Hello, answering to your questions:

• The more filters I have, the slower redux becomes. Can I do something for it?
• Can I access the filters directly in queryFn ?

For filters, you can get them this way, its way simple:

 const [filterOne, filterTwo] = useSelector((state) => state.filters):

you can pass the whole array as arg to use useQuery hook, like this

const {isLoading, isFetching, data} = useGetResourcesQuery(filters);

As for your question, about accessing filters directly inside queryFn, based on docs there is a second argument in queryFn(), called api, it contains getState(), so you can do:

getResources: builder.query({
   	queryFn: (filters, {getState} ) => {
               return getResourcesBasedOnFilters(getState().filter.selectedFilter1, getState().filter.selectedFilter2)
   	},
}),

[GriffinSauce]

To clarify, the idea from my previous comment could look something like this:

getResources: builder.query({
  selectFromState: (state) => {
    // Use some selectors here
  },
  queryFn: (args, {selection} ) => {
    return getResourcesBasedOnFilters(selection.filters)
  },
})

Basically subscribing the endpoint to Redux state directly instead of having to go through the component. RTKQ should merge args and selection for the cache key.

It might even be a good idea to use createStructuredSelector here:

getResources: builder.query({
  selectFromState: createStructuredSelector({
    filters: getFilters,
  }),
  queryFn: (args, {selection} ) => {
    return getResourcesBasedOnFilters(selection.filters)
  },
})

For me this would be very helpful to work with app-wide state like auth, landing parameters, global filters.