React-query request with parameters from react-router

Question

I'm trying to make a request to the API with some specific parameters (in this case, userName and listId).

What comes to my mind first is the following:

const { userName, listId } = useParams();
const list = useQuery(["lists"], api.fetchList(userName, listId)); // This line is incorrect

Inside my API file, I'm doing something like this:

export const fetchList = async (userName, listId) =>
api.get(`/list/${userName}/${listId}`).then((res) => res.data);

how is it possible to actually achieve this?

@Alecell Hey! Just found why it was happening. I posted the solution. — Daniel L
– Daniel L, Commented Aug 16, 2022 at 7:42
why are you asking the same question multiple times? stackoverflow.com/questions/73388090/… — TkDodo
– TkDodo, Commented Aug 17, 2022 at 14:49
Does this answer your question? React-query and navigation (react-router-dom) returns blank pages — TkDodo
– TkDodo, Commented Aug 17, 2022 at 14:49

Daniel L · Accepted Answer · 2022-08-16 07:41:52Z

1

I found the solution.

When we are passing parameters, we will have to write this the following way:

const list = useQuery(["lists"], () => api.fetchList(listId));

(I had to remove userId since it's not necessary for my API).

answered Aug 16, 2022 at 7:41

Daniel L

2734 silver badges16 bronze badges

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

1 Answer 1