react query with parameters

Question

I have a react query that wraps on of my API calls. I would like to expose a paramter to the user of my custom hook which lets them set the paramter for this specific API call.

How can I do that idiomatically?

My current custom hook looks like this:

const useGamesApi = () => {
  const [games, setGames] = useState<Game[]>([]);

  const upcomingGamesQuery = useQuery(
    ["upcoming", date],
    async ({ queryKey }) => {
      const [_, date] = queryKey;

      const ret = await apiGetUpcomingGames(date);
      return ret;
    },
    {
      onSuccess: (data) => {
        setGames(data);
      },
    }
  );

  return {
    games: games,
  };
};

export default useGamesApi;

This doesn't expose the date parameter as I would want it, since there is no external way of modifyin that date parameter.

yumol2137 · Accepted Answer · 2022-09-22 18:05:50Z

0

You can just pass the parameter in braces, just like functions. Then user would be able to use it like useGamesApi(key)

answered Sep 22, 2022 at 18:05

yumol2137

491 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

geo10 Over a year ago

I feel dumb... Thanks!

TkDodo Over a year ago

the original way of extracting the date from the queryKey should work as well. what do you mean with "it doesn't expose the date parameter as I would want it" ?

Collectives™ on Stack Overflow

react query with parameters

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related