1

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.

enter image description here

and I'm calling it like this: enter image description here

whicencer
  • 13
  • 2
  • Could you please share also the code as well as the screenshot, in order us to copy the code and give the response easily. – ipikuka Nov 12 '22 at 12:53
  • Please provide enough code so others can better understand or reproduce the problem. – Community Nov 13 '22 at 10:25

1 Answers1

0

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);
}
ipikuka
  • 524
  • 4
  • 9