How to throw argument in RTK Query (queryFn)

Question

I have queryFn query in RTK, and I need to get some data from firebase DB by element ID. But when I give this arg to queryFn like in example below, I got undefined.

and I'm calling it like this:

Answer 1

The reason you got undefined is because the useGetCardByIdQuery hook returns the data undefined initially. The data is going to be available after a success fetch.

As far I understand from your code, you are trying to get the cards of authorized firebase user; so you don't need to pass any id indeed since I see that you are not using the id in the queryFn.

In that case, just pass the undefined like useGetCardByIdQuery(undefined); and return the cardList.

And for better typing, you can define the builder query with <OutputType, InputType>

getCardsById: builder.query<CardList, string>({
  queryFn: async (id, api, extraOptions, fetchWithBQ) => {
    try {
      const user = getAuth();
      ...
      const cardList = cardSnapshot.docs.map(doc => doc.data())

      return { data: cardList }
    } catch (error) {
      return { error }
    }
  },
})

Then you can call the hook in the component.

const response = useGetCardsByIdQuery(undefined);

if (response.data) {
  const cards = response.data;
  console.log(cards);
}