Elegant way to create a reusable, type-safe queryFn?

[agusterodin]

I had to set up a queryFn as shown below to get an autocomplete searchbox to behave the way I wanted. Is there a type-safe way to turn it into a reusable function so it can be used in other areas of my app?

import { TargetListSearchResult } from 'datamodels'
import { campaignsApi } from './index'

const targetListApiSlice = campaignsApi.injectEndpoints({
  endpoints: builder => ({
    getTargetListSearchResults: builder.query<null | TargetListSearchResult[], string>({
      queryFn: async (searchText, baseQueryApi, baseQuery, fetchWithBaseQuery) => {
        if (searchText === '') {
          return { data: null }
        }
        else {
          return (await fetchWithBaseQuery(`/targetList/search/${searchText}`)) as any
        }
      }
    })
  }),
  overrideExisting: true
})

export const { useGetTargetListSearchResultsQuery } = targetListApiSlice

[Dovakeidy]

In my opinion, this is not the place where you should control whether or not there's a text search. I'd rather use the "skip" option in the query or the skipToken. Doc link

Eg.

useGetTargetListSearchResultsQuery(searchText, {
 skip: !searchText.length
});

// or
import { skipToken } from '@reduxjs/toolkit/query/react';

useGetTargetListSearchResultsQuery(searchText || skipToken);

With this, you can use query instead of queryFn and get the typing you've defined.