title: How to use RTK query selector with an argument?
body: <p>I use RTK Query to consume an <code>/items/filter</code> API. In the codes below, the debouncedQuery holds a value of query string parameter to be used to call a filter API endpoint.  e.g.: In the <code>/items/filter?item_name=pencil</code> and return the matched results. When it's empty, then <code>/items/filter</code> is called and returns a limited number of results (20 items).</p>
  <p>So far, <code>/items/filter</code> returns the results and are displayed as expected while the application is started.</p>
  <p>When I passed a filter param <code>/items/filter?item_name={debouncedQuery}</code>, it returned the results. But, it was not shown because, in the Item Detail Component, the <code>selectItemById</code> does not return any result with the provided ids.</p>
  <p><strong>Bellow are sample code:</strong></p>
  <p><strong>Search Item</strong> Component:</p>
  <pre><code>export function SearchItem(props: SearchItemProps) {
      const {onSelectedItem} = props;
  
      const [itemName, setItemName] = useState&lt;string|undefined&gt;(undefined);
      const debouncedQuery = useDebounce(itemName, 500);
  
      const {currentData: items, refetch, isLoading, isFetching, isSuccess} = useFilterItemsQuery(debouncedQuery, {
          refetchOnFocus: true,
          refetchOnMountOrArgChange: true,
          skip: false,
          selectFromResult: ({data, error, isLoading, isFetching, isSuccess}) =&gt; ({
              currentData: data,
              error,
              isLoading,
              isFetching,
              isSuccess
          }),
      });
  
      const ids = items?.ids
  
      useEffect(() =&gt; {
          refetch();
      }, []);
  
      const handleOnChange = (event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
          const value = event.target.value.toLowerCase();
          setItemName(value);
      }
  
      let content;
      if (isLoading || isFetching) {
          content = &lt;div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 50}}&gt;
              &lt;Spinner animation=&quot;grow&quot; variant=&quot;dark&quot;/&gt;
          &lt;/div&gt;;
      }
  
      if (!ids?.length) {
          content = &lt;Alert variant=&quot;dark&quot;&gt;
              &lt;Alert.Heading&gt;Oh snap! What happened?&lt;/Alert.Heading&gt;
              &lt;p&gt;The item: {itemName} is not found!&lt;/p&gt;
          &lt;/Alert&gt;;
      }
  
      if (isSuccess) {
          content = ids?.length ? &lt;ListGroup&gt;
              {ids.map((itemId: EntityId, index: number) =&gt; {
                  return &lt;ItemDetail key={index} index={index} id={itemId} onSelectedItem={onSelectedItem}/&gt;
              })}
          &lt;/ListGroup&gt; : null;
      }
  
  
      return (
          &lt;&gt;
              &lt;Card className=&quot;bg-secondary bg-opacity-10 pt-3&quot;&gt;
                  &lt;Card.Header&gt;
                      &lt;SearchForm name=&quot;item_name&quot; placeholder=&quot;Search Item&quot; onChange={handleOnChange}/&gt;
                  &lt;/Card.Header&gt;
                  &lt;Card.Body style={{minHeight: 544, maxHeight: 544, overflowY: &quot;auto&quot;}}&gt;
                      {content}
                  &lt;/Card.Body&gt;
              &lt;/Card&gt;
          &lt;/&gt;
  
      )
  }
  </code></pre>
  <p><strong>Item Detail</strong> Component</p>
  <pre><code>export function ItemDetail(props: ItemProps) {
      const {index, id, onSelectedItem} = props;
  
      const item = useAppSelector(state =&gt; {
          return selectItemById(state, id);
      });
  
      console.log(&quot;item: &quot;, item);
  
      const handleOnClickedItem = (selectedItem: Item) =&gt; {
          onSelectedItem(selectedItem);
      }
      return &lt;ListGroup.Item
          action
          onClick={() =&gt; handleOnClickedItem(item!)}
          className={&quot;d-flex justify-content-between align-items-start&quot;}
          key={item?.item_uuid}
          variant={index % 2 === 0 ? &quot;light&quot; : &quot;dark&quot;}
      &gt;
          &lt;div className=&quot;ms-2 me-auto&quot;&gt;
              &lt;div&gt;{item?.item_name}&lt;/div&gt;
          &lt;/div&gt;
          &lt;Badge bg=&quot;dark&quot; className={&quot;bg-opacity-50&quot;} style={{minWidth: 100}}&gt;
              &lt;NumberFormat
                  value={item?.price}
                  displayType={'text'}
                  thousandSeparator={true}
                  prefix={''}
                  renderText={(formattedValue: string) =&gt; &lt;div&gt;{formattedValue}&lt;/div&gt;}
              /&gt;
          &lt;/Badge&gt;
      &lt;/ListGroup.Item&gt;
  }
  </code></pre>
  <p>Item ApiSlice</p>
  <pre><code>const itemsAdapter = createEntityAdapter&lt;Item&gt;()
  
  const initialState = itemsAdapter.getInitialState();
  
  export const itemApiSlice = catalogApiSlice.injectEndpoints({
      endpoints: builder =&gt; ({
          filterItems: builder.query({
              query: (arg) =&gt; {
                  const url = CATALOG_FILTER_ITEMS
                  if (arg) {
                      return {
                          url,
                          params: {item_name: arg},
                      };
                  } else {
                      return {url};
                  }
  
              },
              transformResponse(response: { data: Item[] }) {
                  return itemsAdapter.setAll(initialState, response.data)
              },
              providesTags: (result: Item[] | any) =&gt; {
                  if (result.ids.length) {
                      // @ts-ignore
                      return [...result.ids.map(({id}) =&gt; ({type: 'Items' as const, id})), {
                          type: 'Items',
                          id: 'FILTER_LIST'
                      }];
                  } else return [{type: 'Items', id: 'FILTER_LIST'}];
              },
          }),
          getItems: builder.query({
              query: () =&gt; CATALOG_ITEMS,
              transformResponse(response: { data: Item[] }) {
                  return response.data;
              },
              providesTags: (result, error, arg) =&gt; {
                  // @ts-ignore
                  return result
                      ? [
                          ...result.map(({id}) =&gt; ({type: 'Items' as const, id})),
                          {type: 'Items', id: 'LIST'},
                      ]
                      : [{type: 'Items', id: 'LIST'}]
              },
          }),
  
          getItem: builder.query({
              query: id =&gt; {
                  return {
                      url: `${CATALOG_ITEMS}/${id}`,
                  };
              },
              transformResponse(response: { data: Item }) {
                  return response.data;
              },
              providesTags: (result, error, arg) =&gt; {
                  // @ts-ignore
                  return result
                      ? [
                          {type: 'Items' as const, id: result.id},
                          {type: 'Items', id: 'DETAIL'},
                      ]
                      : [{type: 'Items', id: 'DETAIL'}]
              },
          }),
      })
  })
  
  export const {
      useGetItemsQuery,
      useFilterItemsQuery,
      useGetItemQuery
  } = itemApiSlice
  
  export const selectItemsResult = itemApiSlice.endpoints.filterItems.select();
  
  const selectItemsData = createDraftSafeSelector(
      selectItemsResult,
      itemsResult =&gt; {
          return itemsResult.data
      }
  )
  
  export const {
      selectAll: selectAllItems,
      selectById: selectItemById,
      selectIds: selectItemIds
  } = itemsAdapter.getSelectors((state: any) =&gt; selectItemsData(state) ?? initialState);
  </code></pre>
  <p>I am wondering how I can get that  <code>debouncedQuery</code> in <code>select()</code> or how to update the memoized select in each <code>/items/filter?item_name={debouncedQuery}</code>.</p>
  <p>Thank you</p>