How to fetch with parameters using React Query?

Question

For the sake of this question let's first assume existence of such entity:

export interface Event {
    id: number;
    date: Date;
}

Then let's assume there's backend with such endpoints:

GET /events -> returns all events
GET /events?startDate=dateA&endDate=dateB -> returns all events between dateA and dateB

I create hook containing 4 methods (one for each CRUD operation) in my frontend code like this:

export function useEvents() {
    const getEvents() = async () => {
        const response = await axios.get(`events`);
        return response.data;
    }
    const postEvent()...
    const updateEvent()...
    const deleteEvent()...

    const query = useQuery('events', getEvents);
    const postMutation = ...
    const updateMutation = ...
    const deleteMutation = ...

    return { query, postMutation, updateMutation, deleteMutation }
}

This architecture works like a charm but I got to the point where I would like to conditionaly fetch events based on currently chosen month in my Calendar.tsx component.

How would I inject this information into useQuery() and getEvents()?

TkDodo · Accepted Answer · 2022-04-22 13:20:41Z

8

the query key should contain all "dependencies" that you need for your fetch. This is documented in the official docs here, and I've also blogged about it here.

So, in short:

const getEvents(month) = async () => {
  const response = await axios.get(`events/${month}`);
  return response.data;
}

const query = useQuery(['events', month], () => getEvents(month));

The good thing is that react-query will always refetch when the key changes, so data for every month is cached separately, and if the month changes, you'll get a fetch with that month.

answered Apr 22, 2022 at 13:20

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

4 Comments

ablaszkiewicz1 Over a year ago

Could you explain best way to use it with they way my hook is constructed? Because now if I want to access query data I do: const { query } = useEvents(). How would I pass month here?

TkDodo Over a year ago

const { query} = useEvents(month) ?

Shamseer Ahammed Over a year ago

@TkDodo what to do for scenerios where your is data not available already ? data is only made on event click and i need to call function that does a refetch with new data as parameter ?

TkDodo Over a year ago

same thing: you put that data into the query key and let react-query refetch automatically.

Collectives™ on Stack Overflow

How to fetch with parameters using React Query?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related